请注意，本文编写于 91 天前，最后修改于 91 天前，其中某些信息可能已经过时。
<!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>
版权属于：小小孩子们
本文链接：https://www.xxhzm.cn/archives/169/
转载时须注明出处及本声明
