如何用jquery写选项卡
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#div {
width: 330px;
height: 500px;
margin: 50px auto;
}
ul li {
width: 110px;
height: 50px;
line-height: 50px;
text-align: center;
float: left;
display: inline-block;
background-color: lightcoral;
color: green;
border: 1px solid red;
}
p {
width: 330px;
height: 450px;
display: none;
border: 1px solid darkcyan;
}
p img {
width: 330px;
height: 450px;
display: block;
background-size: 100%;
}
.active {
background-color: greenyellow !important;
}
- 陈钰琪1
-
- 陈钰琪2
-
- 陈钰琪3
-
$(function () {
$(’#div ul li’).eq(0).addClass(‘active’)
$(‘p’).eq(0).css(‘display’, ‘block’)
$(’#div ul li’).click(function () {
var _index = $(this).index()
$(’#div ul li’).removeClass(‘active’).eq(_index).addClass(‘active’)
$(‘p’).css(‘display’, ‘none’).eq(_index).css(‘display’, ‘block’)
}
)
})
~~~
扫一扫
863
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
