仿QQ面板滑動(dòng)切換代碼

使用方法：

1、head引入css文件

<link type="text/css" href="css/style.css" rel="stylesheet" />

2、head引入js文件

<script type="text/javascript" src="js/jquery.min.js"></script>

3、body引入部分

<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)?，直接return
		* */
		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)畫前的坐標(biāo)定位好，它的zindex要高于其他所有（包含當(dāng)前擁有active）的item
			left: (direction === 'right' ? '100%' : '-100%'),
			zIndex: 22
		});
		setTimeout(function () {  // 下一次輪詢?cè)O(shè)置動(dòng)畫和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)畫
		$('.tab--card--content--item').eq(index).addClass('active').siblings().removeClass('active');
	});
})
</script>