.title li:last-child{
border-right:none;
}
.title .item{
border-bottom:none;
}
.content li{
width:100%;
height:350px;
/*border:1px solid green;*/
text-align:center;
line-height:350px;
display:none;
}
.content .active{
display:block;
}
</style>
</head>
<body>
<div class="wrap">
<ul class="title">
<li class="item">标题一</li>
<li >标题二</li>
<li >标题三</li>
</ul>
<ul class="content">
<li class="active">内容一</li>
<li>内容二</li>
<li>内容三</li>
</ul>
</div>
<script>
// Add a binding event to the title
$('.title li').click(function(){
// siblings() get siblings that match each element in the set, filtering by selector is optional
$(this).addClass('item').siblings().removeClass('item');
// Get index value Associate title and content by index value
var index=$(this).index();
$ ('.content li').eq(index).addClass('active');
$('.content li').eq(index).siblings().removeClass('active');
})
</script >
</body>
</html>
Tab
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=324653489&siteId=291194637
Recommended
Ranking