jquery --- 监听tab栏的变化

1. jQuery样式操作

1.1 操作css方法

参数只写属性名,则返回属性值(字符串)

$(this).css('color')

参数是属性名、属性值(逗号分隔，则表示设置属性

$(this).css('color','red')

参数可以是对象的形式

$(this).css({width: 400px,height: 400px
})

1.2 设置类样式方法

添加类

$('button:first').click(function() {$('div').addClass('block')
})

删除类

$('button:first').click(function() {$('div').removeClass('block')
})

切换类

$('button:first').click(function() {$('div').toggleClass('block')
})

1.3 栗子: tab栏切换

思路:

当点击小li时,当前被点击的li添加类 current, 其余的移除current类
得到当前的索引号,显示相同索引号的内容

<style>.clearfix:before,.clearfix:after {content: '';display: table;}.clearfix:after {clear: both;}.clearfix {*zoom: 1;}.header ul {width: 700px;height: 50px;padding-top: 15px;background-color: #ccc;}.box {width: 700px;height: 300px;margin: 30px auto;}li {float: left;height: 40px;line-height: 40px;list-style: none;padding: 0 15px;}li:hover {cursor: pointer;}.current {background-color: red;color: white;}.header {padding-top: 15px;}.content {padding-top: 20px;padding-left: 45px;}.content div {display: none;}
</style>
</head>
<body>
<div class="box"><div class="header clearfix"><ul><li class="current">商品介绍</li><li>规格与包装</li><li>售后保障</li><li>商品评价(50000)</li><li>手机社区</li></ul></div><div class="content"><div display="block">商品介绍模块</div><div>规格与包装模块</div><div>售后保障模块</div><div>商品评价(50000)模块</div><div>手机社区模块</div></div>
</div>
<script>$(function() {$('.content div:first').show()$('.box li').click(function() {var currentIndex = $(this).index();$(this).addClass('current')$(this).siblings('li').removeClass('current')$('.content div').hide()$('.content div').eq(currentIndex).show()})})
</script>
</body>