类操作
在原生JS里面className会覆盖元素原来有的类名
jquery里面的类操作就不会这样,只对指定类进行操作,不影响原先的类名
添加类名
addClass()
删除类名
removeClass()
注意:使用这个方法,括号里面不需要再加那个小点,直接写类名就行了
比如说
<div class = "one"></div>
<script>
$('.one').addClass('two')
</script>
这样我就填加了一个two的类名,不会对one造成影响
Tab栏切换案例jquery代码
这里可以看到,利用了jQuery,很方便的就可以写出想要的效果
<style>
*{
margin: 0;
padding: 0;
}
.tab{
border: 1px solid gray;
height: 300px;
width: 755px;
margin: 100px auto;
}
.box-1{
border-bottom:1px solid gray;
height: 50px;
background-color: whitesmoke;
text-align: center;
}
li{
list-style-type: none;
line-height: 50px;
float: left;
display: block;
width: 150px;
border-right: 1px solid gray;
}
.li-frist{
background-color: goldenrod;
}
.bg{
background-color: goldenrod;
}
.item{
display: none;
}
</style>
<body>
<div class= "tab">
<div class="box-1">
<ul>
<li class="li-frist">产品参数</li>
<li>产品规格</li>
<li>功能模块</li>
<li>售后处理</li>
<li>好评率</li>
</ul>
</div>
<div class= "box-2">
<!-- 设置默认显示出来这个 -->
<div class="item" style="display: block;">产品参数内容</div>
<div class="item">参评规格内容</div>
<div class="item">功能模块内容</div>
<div class="item">售后处理内容</div>
<div class="item">好评率内容</div>
</div>
<script>
$(function() {
$('li').click(function() {
//点击当前的li,当前的li添加一个bg类,其余兄弟移除bg类, 第一个li有li-frist类,也要移除
$(this).addClass('bg').siblings('li').removeClass('li-frist bg')
//拿到当前li的索引号
var index = $(this).index();
//然下面的索引号对应li的索引号,点击li显示当前的索引号的div
$('.box-2 .item').eq(index).show().siblings('.item').hide()
})
})
</script>
效果是和用原生JS写的一摸一样的,在我的博客里也有用原生js去写的这个案例,希望你们喜欢.