1. 程式人生 > >jq寫tab切換

jq寫tab切換

當前 () rem 綁定 display click index block -s

1 $(‘.index-news-sub-box ul li‘).click(function(){
2     var i=$(this).index();
3     var img=$(‘.index-news-img-box a img‘);
4     img.removeClass(‘z-index-2‘);
5     img.eq(i).addClass(‘z-index-2‘).siblings().removeClass(‘z-index-2‘);
6 });

原理:給某個按鈕綁定點擊事件;被點擊的當前元素顯示(可以設置display:block;也可以設置z-index:1;),其他的兄弟元素隱藏(可以設置display:none;也可以設置z-index:0;).

前提:按鈕個數和被切換的內容區的個數相等,且按鈕要有想同的標識(class,id,或標簽),內容區同理。

jq寫tab切換