<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
.tab {
width: 450px;
height: 300px;
background: #F9D1D2;
margin: 100px auto
}
.tab .list {
height: 40px;
}
.tab .list li {
width: 150px;
height: 40px;
line-height: 40px;
list-style: none;
text-align: center;
float: left;
background: #7FDB46;
cursor: pointer
}
.tab .list li.on {
background: #116318;
color: #FFF;
}
.cont {
height: 260px;
background: #E7D9B3
}
.cont .cc {
display: none
}
</style>
<script src="jquery-1.11.3.js"></script>
<script>
$(function() {
$('.list li').click(function() {
$(this).addClass('on').siblings().removeClass('on')
var i = $('.list li').index($(this))
// console.log(i);
$('.cont .cc').eq(i).css('display', 'block').siblings().css('display', 'none')
})
})
</script>
</head>
<body>
<div class="tab">
<div class="list">
<ul>
<li class="on">000</li>
<li>11111</li>
<li>2222</li>
</ul>
</div>
<div class="cont">
<div class="cc" style="display:block">0000的内容</div>
<div class="cc">111111111111的内容</div>
<div class="cc">222222222的内容</div>
</div>
</div>
</body>
</html>
最后修改:2022 年 06 月 05 日
© 允许规范转载