这篇文章主要介绍了html页面中JavaScript实现tab切换的一种方法，原理是非常简单的，当鼠标移动到标题节点时，让他拥有特定的class，同级其他节点移除class，获取到当前节点的位置，然后修改内容节点相同位置的display属性的值，具体如下：

下面是CSS部分代码，可以根据自己的喜好修改样式

<style type="text/css">

.tab{width:300px;height:200px;border:1px solid #666}

.btn span{display:block; width:100px; float:left; text-align:center}

.btn span.select{background: #377bee; color: #fff}

.clear{clear:both;}

.switch ul{display: none}

.switch .block{display: block}

</style>

下面是html代码片段，内容自己搞定

<div class="tab">

<div class="btn">

<span class="select">111</span>

<span>222</span>

<span>333</span>

<div class="clear"></div>

</div>

<div class="switch">

<ul class="block">

<li>11111111111111</li>

<li>11111111111111</li>

<li>11111111111111</li>

<li>11111111111111</li>

<li>11111111111111</li>

</ul>

<ul>

<li>22222222222222</li>

<li>22222222222222</li>

<li>22222222222222</li>

<li>22222222222222</li>

<li>22222222222222</li>

</ul>

<ul>

<li>33333333333333</li>

<li>33333333333333</li>

<li>33333333333333</li>

<li>33333333333333</li>

<li>33333333333333</li>

</ul>

</div>

</div>

<script type="text/javascript" src="./js/jquery-1.7.2.min.js" ></script>

下面是核心，用jQuery写的，此前必须加载jQuery类库。

<script type="text/javascript">

$(function(){

// 如果需要点击切换，将 mouseover 换成 click

$('.btn span').mouseover(function(){

$(this).siblings('span').removeClass('select');

$(".switch ul").eq($(this).addClass('select').index()).addClass('block').siblings('ul').removeClass('block');

})

})

</script>