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>