分類
<link type="text/css" href="css/style.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<div class="tab--card"> <ul class="tab--card--header"> <li class="tab--card--header--item active"> <div class="iconbox"> <i class="iconfont icon-item"><span class="count">23</span></i> </div> <span class="text">我的消息(23)</span> </li> <li class="tab--card--header--item"> <div class="iconbox"> <i class="iconfont icon-item"> <span class="count">99</span></i> </div> <span class="text">我的好友(99)</span> </li> <li class="tab--card--header--item"> <div class="iconbox"> <i class="iconfont icon-item"><span class="count">11</span></i> </div> <span class="text">群/討論組(11)</span> </li> <li class="tab--card--header--item"> <div class="iconbox"> <i class="iconfont icon-item"><span class="count">8</span></i> </div> <span class="text">我的動(dòng)態(tài)(8)</span> </li> <span class="sanjiao"></span> </ul> <ul class="tab--card--content"> <li class="tab--card--content--item active"></li> <li class="tab--card--content--item"></li> <li class="tab--card--content--item"></li> <li class="tab--card--content--item"></li> </ul> </div> <script type="text/javascript"> $(function () { /* * 每個(gè)頭部item被點(diǎn)擊 * */ $('.tab--card--header--item').on('click', function (event) { /* * 如果當(dāng)前item有active,不需要?jiǎng)樱苯觬eturn * */ if($(this).hasClass('active')) { return true; } var index = $(this).index(); // 當(dāng)前被點(diǎn)擊的index下標(biāo) var activeIndex = $(this).siblings('.active').index(); // 當(dāng)前擁有active的index下標(biāo) var direction = index > activeIndex ? 'right' : 'left'; // 項(xiàng)目應(yīng)當(dāng)從右還是從左劃進(jìn)來(lái)? var contentItem = $('.tab--card--content--item').eq(index); // 需要?jiǎng)澾M(jìn)來(lái)的content item // 遍歷內(nèi)容item 就是上面的content item $('.tab--card--content--item').each(function (i) { var zIndex = $(this).index() + 1; // zindex求為每個(gè)內(nèi)容item下標(biāo)+1 if($(this).hasClass('active')) { // 如果當(dāng)前元素有active,那么就應(yīng)該高一點(diǎn)zindex zIndex = 11; } $(this).css({zIndex: zIndex, transition: 'none'}); // 設(shè)置zindex,清空transition }); contentItem.css({ // 先把要?jiǎng)澾M(jìn)來(lái)的content item的動(dòng)畫(huà)前的坐標(biāo)定位好,它的zindex要高于其他所有(包含當(dāng)前擁有active)的item left: (direction === 'right' ? '100%' : '-100%'), zIndex: 22 }); setTimeout(function () { // 下一次輪詢?cè)O(shè)置動(dòng)畫(huà)和left的值 contentItem.css({ transition: 'left 0.3s ease', left: 0 }); }, 0); // 設(shè)置active $(this).addClass('active').css('width','40%').siblings().removeClass('active').css('width','20%'); $('.sanjiao').css({ left: 20+20*index + '%', width: 0+'%'}); // 三角動(dòng)畫(huà) $('.tab--card--content--item').eq(index).addClass('active').siblings().removeClass('active'); }); }) </script>
1. 本站所有素材(未指定商用),僅限學(xué)習(xí)交流。
2. 會(huì)員在本站下載的原創(chuàng)商用和VIP素材后,只擁有使用權(quán),著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材,未經(jīng)合法授權(quán),請(qǐng)勿用于商業(yè)用途,會(huì)員不得以任何形式發(fā)布、傳播、復(fù)制、轉(zhuǎn)售該素材,否則一律封號(hào)處理。
4. 本平臺(tái)織夢(mèng)模板僅展示和個(gè)人非盈利用途,織夢(mèng)系統(tǒng)商業(yè)用途請(qǐng)預(yù)先授權(quán)。