tab切换效果，很多网站都有，充分利用空间，而且富有动态，这类代码大都是依赖js和css实现的，稍微复杂些的可能会有flash，不过下面这个很简单，代码很短，也很容易理解，修改起来也比较容易。
javascript代码

function changeTab(oA){
var oAName = oA.getAttribute(“name”);
var oAs = document.getElementsByName(oAName);
for(var i=0; i < oAs.length; i++){
if(oAs[i].className==”selected” && oAs[i] != oA){
oAs[i].className=”";
var oDiv = document.getElementById(oAs[i].getAttribute(“rel”));
oDiv.style.display=”none”;}
}
oA.className=”selected”;
document.getElementById(oA.getAttribute(“rel”)).style.display=”";
return false;
}

切换的功能代码；

css代码

ul.nav {height: 20px;}
ul.nav li {float: left;}
ul.nav li a {display: block; width:100px;}
ul.nav li a:hover,ul.nav li a.selected {color: #660000; cursor:pointer}
.cont {width: 235px;}

切换样式，上面的高度宽度等值都可以根据需要修改；

html代码

<ul class=”nav”>
<li><a name=”navi” rel=”navi1″ onmouseover=”return changeTab(this);” class=”selected”>js</a></li>
<li><a name=”navi” rel=”navi2″ onmouseover=”return changeTab(this);”>html</a></li>
<li><a name=”navi” rel=”navi3″ onmouseover=”return changeTab(this);”>css</a></li>
</ul>
<div class=”cont” id=”navi1″>什么是js</div>
<div class=”cont” id=”navi2″ style=”display:none;”>什么是html</div>
<div class=”cont” id=”navi3″ style=”display:none;”>什么是css</div>

像head、body等html基本的标签和头部信息就略去了，只贴出和切换相关的代码，可以根据需要添加tab项，同时注意navi加数值；

如何把代码整合起来就不说了，很基础的东西，css初识和javascript初识都说过。

实际效果：查看demojs+css切换

p.s.因为代码简洁得很，直接copy就可以测试，也没有下载包，有问题可留言——耕堂www.gengtang.net

 右上方更多相关内容/站内搜索-关键词请用空格隔开