用jquery做选项卡且带有动画效果
<div class="box">
<ul class="header">
<li class="head">娱乐</li>
<li class="zhong">科技</li>
<li class="last">社会</li>
</ul>
</div>
<div class="box2">
<div class="bon">
<ul>
<li>
<ul>
<li>《快本》韩庚首谈恋爱细节 没想到女方为他改变了这么多</li>
<li>夫妻有爱日常：孙怡取关董子健，还问“他是谁”</li>
<li>领证了？罗志祥周扬青庆祝纪念日这样秀恩爱</li>
<li>明星演农民：孙红雷痞气十足，成龙扮相接地气，王宝强细节最真实</li>
</ul>
</li>
<li>
<ul>
<li>2007年7月，jQuery 1.1.3版发布</li>
<li>jQuery的性能达到了Prototype</li>
<li>jQuery UI中包含大量预定义好的部件</li>
<li>2009年1月，jQuery 1.3版发布，它使用了全新的选择符引擎Sizzle</li>
</ul>
</li>
<li>
<ul>
<li>John Resig提议改进Prototype的“Behaviour”库</li>
<li>具有高效灵活的css选择器</li>
<li>jQuery的核心特性可以总结为</li>
<li>jQuery是一个快速、简洁的JavaScript框架</li>
</ul>
</li>
</ul>
</div>
</div>
* {
margin:0;
padding:0;
}
li {
list-style:none;
}
body {
font-size:14px;
}
.box {
width:500px;
height:30px;
margin:0 auto;
margin-top:20px;
}
.header>li {
float:left;
width:80px;
background:#ddd;
text-align:center;
line-height:30px;
cursor:pointer;
}
.zhong {
margin-left:20px;
}
.last {
margin-left:20px;
}
.box2 {
width:500px;
margin:0 auto;
position:relative;
overflow:hidden;
}
.bon {
width:1000%;
}
.bon ul li {
float:left;
width:500px;
padding-top:14px;
}
.bon ul li ul li:first-child {
padding-top:5px;
}
$(".header>li").eq(0).css("background", "#8B0000").css("color", "white")
$(".box ul li").mouseover(function() {
var index = $(this).index()
var w = $(".box2 .bon ul li").width()
$(".bon").stop().animate({ //.stop在此处添加
"marginLeft": -w * index
})
$(this).css("background", "#8B0000").css("color", "white").siblings().css("background", "#ddd").css("color", "#000000")
})
作者：小屋
链接：http://www.rumenwu.com/operate/621.html
来源：入门屋
入门屋著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。部分内容复制其他平台，如有侵权请联系删除。
支付宝打赏 
微信打赏 
