用JS实现网站导航的切换

1、编写导航html首先我们写好我们导航的基本html代码<div clas衡痕贤伎s="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';}