tab切换
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>tab切换</title>
<script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
*{
padding:0;
margin:0;
}
body{
padding:100px;
}
li{
list-style: none;
}
.tab_menu{
height:30px;
width:500px;
}
.tab_menu span{
float: left;
background: #999;
height:100%;
width:100px;
border-right:1px solid #fff;
text-align: center;
cursor: pointer;
}
.tab_menu span:hover{
background:#765876;
}
.tab_menu span.cur{
background:#765876;
}
.tab_cons{
width:403px;
height:200px;
overflow: hidden;
}
.tab_cons li{
width:100%;
height:100%;
background: #eee;
}
</style>
</head>
<body>
<div class="tab_menu">
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div>
<ul class="tab_cons">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
<li>内容4</li>
</ul>
<script >
$(function(){
var $ele = $(".tab_menu span"),
cons = $(".tab_cons li");
$ele.click(function(event){
$(this).addClass("cur")
.siblings().removeClass("cur");
var index = $ele.index(this);
$(cons[index]).show()
.siblings().hide();
// $(cons).eq(index).show().siblings().hide();
});
});
</script>
</body>
</html>
网友评论