用JS实现网站导航的切换

1、编写导航html

首先我们写好我们导航的基本html代码

<div class="nav">

<ul>

<li><a href="javascript:;" onclick="tabNav(1)">国内新闻</a></li>

<li><a href="javascript:;" onclick="tabNav(2)">国际新闻</a></li>

<li><a href="javascript:;" onclick="tabNav(3)">娱乐新闻</a></li>

<li><a href="javascript:;" onclick="tabNav(4)">科技新闻</a></li>

</ul>

</div>

<div class="cnt" id="cnt_1" style="display:block;">我是国内新闻</div>

<div class="cnt" id="cnt_2"><div>我是国际新闻</div></div>

<div class="cnt" id="cnt_3">我是娱乐新闻</div>

<div class="cnt" id="cnt_4">我是科技新闻</div>

2、编写导航css样式

美化一下我们的导航

.top{height:40px;background:#fff;}

.nav{width:1200px;height:40px;background:#147DDF;}

ul{list-style:none;}

ul li{float:left;padding:0 10px;}

ul li a{color:#fff;line-height:40px;text-decoration:none;}

.cnt{display:none;}

3、编写js代码

function tabNav(num){

for(var i=1;i<5;i++){

document.getElementById('cnt_'+i).style.display = 'none';

}

document.getElementById('cnt_'+num).style.display = 'block';

}