如上图，大致效果□□□□是鼠标移□□动到上方TAB标签上时，TAB的颜色状□□态发生转□□□□移，下面的列□□□表切换到✦相应的模◢块。
这里根据□□页面用div布局了一□□□□下结构，如下图：
（页面结构□□□代码和样□□式代码太□□多了，这里就不□□□上传了。）
如何通过□□□□移动鼠标♦到相应的TAB位置（即上图中 div（index-news-menu）中的 li 元素）从而切换□□□下面的内□□□□容模块（即上图中 div （index-news-list）中的 lbox 模块）的同时改□□□变相应TAB标签的显□□□□示状态呢？
这里我是□□□□通过jquer 中的语法□□控制TAB标签中的”on”类名实现TAB状态的切□□换效果，控制div （index-news-list）的偏移量□□□□实现内容□□□□模块切换□□到对应TAB的效果的，jquery代码如下：
<script>
//新闻切换
//获取鼠标□□□□移动到相□□应的tab标签
$(".index-news-menu li").mouseover(function () {
//改变当前tab的显示状◇态，同时清除□□□□上一个标※签的选中◇状态
$(this).addClass("on").siblings().removeClass("on");
//将选中状□□态的tab标签其相□□□□对于同胞□□元素的 index 位置赋值▽给 ni（这里ni是随便命□□名的）
var ni = $(this).index();
//将内容模□□块index - news - list偏移一次□□□□的偏移量□□赋值给nw（这里nw是随便命•名的）
var nw = $(".index-news-list").width() / 6;
//通过当前tab的index值计算需◎要偏移的□□距离，然后将这□□□□个值作为□□□□内容模块index - news - list的偏移量
$(".index-news-list").css("left", - ni * nw );
})
</script>
这样就实□□□现了上述□□效果了。
但是光这□□样实现出□□□来的切换□□□效果是看□□不到通过□□□□偏移来实□□□现切换的□□□□那种效果□□□□的，预想的效☆果是鼠标□□□□移到到TAB 上，下面的内□□□容模块就○相对应的□□□□向左较缓□□□□慢的偏移□□□到相对应□□□的内容模□□□□块。这里我是◣通过CSS3中的transition 属性来实○现缓动效□□□果的。
transition 属性是一□□□个简写属□□□性，用于设置□□□四个过渡▽属性：
transition-property
transition-duration
transition-timing-function
transition-delay
在这里我◣是通过给div （index-news-list）添加transition:all ease .3s;这个属性✦来给div （index-news-list）一个偏移□□□时间，从而偏移◥的时候有□□□□个过度时★间，就实现缓□□动效果了。
到这里基□□本就实现☆了预想的□□□□效果，但是，这么多内□□□□容模块网□□□页一行是□□□□排列不下□□□□的，而要想不□□□换行的话，就需要div （index-news-list）的宽度足□□够大，给足了它□□□□的宽度后，网页底部□□□就会出现□□一个横向□□□□滚动条，很是影响□□□□网页的美□□□□观，于是我又□□□□丨给div（index-box）加了一个◆超出隐藏□□的属性overflow:hidden; 这样就保◉证了在网☆页上只显□□□示与当前◈选中的TAB对应的（lbox）的内容模□□□块了。
当然具体△效果看个□□□人喜好了，而且是点□□击TAB才切换还□□□是和我这□□□里一样的□□□鼠标划上□□□□去就切换，都是能设□□置的。
粗糙之作，不妥之处❖望大家不□□□吝赐教。
菲律宾j9集团□□□□专注网站□□定制，如果你已□□□□丨经设计□□好★了网站效□□□□果图，我们可以□□制作前端□□□和开发后□□□□台程序。
