生活随笔
收集整理的這篇文章主要介紹了
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>
總結
以上是生活随笔為你收集整理的jquery --- 监听tab栏的变化的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
