jquery精简选项卡
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="application/javascript" src="js/jquery.min.js"></script>
</head>
<style type="text/css">
*{padding: 0;margin: 0}
#tab{width: 400px; height: 400px; position: absolute;left: 50%;top:50%;margin: -200px 0 0 -200px;}
.tab_menu{width: 300px;height: 30px; margin: auto}
ul{list-style: none}
ul li{ float: left;width: 70px; height: 30px;margin-right: 10px;;color: #ccc;text-align: center;line-height: 30px;}
.tab_box{width: 300px;height: 150px;margin:auto;border: 1px dotted rosybrown;}
.hide{display: none}
.selected{background-color: royalblue}
</style>
<script type="application/javascript">
$(function(){
$("ul li").click(function(){
$(this).addClass("selected").siblings().removeClass("selected"); //给当前对象添加高亮并且它的兄弟对象删除高亮样式
var index=$("ul li").index(this); //获取当前对象索引
$(".tab_box>div")
.eq(index).show() //显 示<li>元素对应的<div>元素
.siblings().hide(); //并让其他<div>元素隐藏
});
});
</script>
<body>
<div id="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>娱乐</li>
<li>政治</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">娱乐</div>
<div class="hide">政治</div>
</div>
</div>
</body>
</html>
本文来自博客园，作者：cmwang2017，转载请注明原文链接：https://www.cnblogs.com/bm20131123/p/4629480.html
