web实战(三)— — Tab选项卡切换效果

最新推荐文章于 2024-09-22 14:11:19 发布

mqy1023

最新推荐文章于 2024-09-22 14:11:19 发布

阅读量1.4w

点赞数 2

分类专栏： Web实战文章标签： jquery web

本文链接：https://blog.csdn.net/mqy1023/article/details/51194823

版权

Web实战专栏收录该内容

19 篇文章 0 订阅

订阅专栏

参考慕课网教程《Tab选项卡切换效果》：http://www.imooc.com/learn/176
这里写图片描述

基本功能有延迟切换、自动切换。本文用jquery实现

1、html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab标签切换</title>
    <link href="css/tabswitch.css" type="text/css" rel="stylesheet"/>
    <script src="js/jquery-1.12.1.js"></script>
</head>
<body>

<div>
    <div class="notice">
        <!-- 上面的标题栏 -->
        <div class="notice-title">
            <ul>
                <li class="title-item select"><a href="#">公告</a></li>
                <li class="title-item"><a href="#">规则</a></li>
                <li class="title-item"><a href="#">论坛</a></li>
                <li class="title-item"><a href="#">安全</a></li>
                <li class="title-item"><a href="#">公益</a></li>
            </ul>
        </div>

        <!-- 下面的内容部分 -->
        <div class="notice-content">
            <!-- 第一个内容模块 -->
            <div class="module">
                <ul>
                    <li><a href="#">张勇：要玩快乐足球</a></li>
                    <li><a href="#">阿里2000万驰援灾区！</a></li>
                    <li><a href="#">旅游宝让你边玩边赚钱</a></li>
                    <li><a href="#">多行跟进阿里信用贷款</a></li>
                </ul>
            </div>
            <div class="module">
                <ul>
                    <li><span>[<a href="#">通知</a>]</span><a href="#">"滥发"即将换新</a></li>
                    <li><span>[<a href="#">通知</a>]</span><a href="#">比特币严管啦！</a></li>
                    <li><span>[<a href="#">通知</a>]</span><a href="#">禁发商品名录!</a></li>
                    <li><span>[<a href="#">通知</a>]</span><a href="#">商品属性限制</a></li>
                </ul>
            </div>
            <div class="module">
                <ul>
                    <li><span>[<a href="#">聚焦</a>]</span><a href="#">金牌卖家再启航</a></li>
                    <li><span>[<a href="#">通知</a>]</span><a href="#">橱窗规则升级啦</a></li>
                    <li><span>[<a href="#">话题</a>]</span><a href="#">又爱又恨优惠劵</a></li>
                    <li><span>[<a href="#">工具</a>]</span><a href="#">购后送店铺红</a></li>
                </ul>
            </div>
            <div class="module">
                <ul>
                    <li><a href="#">个人重要信息要管牢</a></li>
                    <li><a href="#">卖家防范红包欺诈提醒！</a></li>
                    <li><a href="#">更换收货地址的陷阱</a></li>
                    <li><a href="#">注意骗子的技术升级了</a></li>
                </ul>
            </div>
            <div class="module">
                <ul>
                    <li><a href="#">走进无声课堂</a></li>
                    <li><a href="#">淘宝大众评审赢公益金！</a></li>
                    <li><a href="#">爱心品牌联合征集</a></li>
                    <li><a href="#">名公益机构淘宝开店攻略</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script src="js/tabswitch.js"></script>
</body>
</html>

2、css（格式为了节省空间）

/*取消默认样式*/
* {  padding: 0;  margin: 0;  list-style: none;  font-size: 12px;  }
.notice { /*整个div长宽为300 * 100*/
    width: 298px;  height: 98px;  margin: 10px;  border: 1px solid #eee;  overflow: hidden;
}
.notice-title { /*标题的样式*/
    height: 27px;  position: relative;  background-color: #F7F7F7;
}
.notice-title ul { /* absolute + left */
    position: absolute;  width: 300px;  left: -1px; /*往左移1px，因为li左右边有border边框*/
}
.notice-title ul li {
    float: left;  width: 58px; /*58+padding的2像素*/
    height: 26px;  line-height: 26px;  text-align: center;  overflow: hidden;
    background-color: #F7F7F7;  border-bottom: 1px solid #eee;  padding: 0 1px; /*左右边padding一个像素*/
}
.notice-title ul li.select {
    background: #FFF;  border-bottom-color: #FFF; /*下面border置白*/
    border-left: 1px solid #ccc; /*左右边border*/
    border-right: 1px solid #ccc;  padding: 0;  font-weight: bolder;
}
.notice li a:link, .notice li a:visited {/*清除默认下划线和设置默认字体颜色*/
    text-decoration: none;  color: #000;
}
.notice li a:hover {  color: #F90;  }/*划过的样式*/
.notice-content .module {  margin: 10px 6px;  }
.notice-content .module ul li {
    float: left;  width: 143px; /*(298-6*2)/2*/
    height: 25px;  overflow: hidden;
}

3、js

//实现方式一(hover)
//$(function() {
//
//    //将除了第一div隐藏
//    $('.module:not(:first)').hide();
//
//    $('.title-item').hover(function(e){
//        $('.title-item').removeClass('select');//清除所有的select样式
//        $(this).addClass('select');//当前加上select样式
//        //console.log($(this).index());
//        $('.module').hide();
//        $('.module').eq($(this).index()).show();//显示对应div
//    },function(){
//
//    });
//});

//实现方式二(setTimeout、mouseover和mouseout)【延迟切换】
//var timeOutId;//延迟时间
//$(function() {
//    //初始化
//    $('.module:not(:first)').hide();//隐藏第一个module的之外的div
//
//    $('.notice-title li').each(function(index){
//        $(this).mouseover(function() {
//            timeOutId = setTimeout(function () {
//                $('.module').hide();//隐藏所有module的div
//                $('.module').eq(index).show();
//                $('.title-item').removeClass('select');//清除所有的select样式
//                $('.title-item').eq(index).addClass('select');
//            }, 300);
//        }).mouseout(function(){
//            clearTimeout(timeOutId);
//        });
//    })
//});

//实现方式三【自动轮播】
var index = 0;//默认index为0
var timer = null;
var hasStarted = false; //是否已经开始轮播
$(function () {

    //初始化
    $('.module:not(:first)').hide();//隐藏第一个module的之外的div

    start();//开启自动轮播

    //划过整个区域时停止轮播
    $('.notice').hover(function () {
        stop();//停止
    }, function () {
        start();//离开整个区域是开启轮播
    })

    //划过li时
    $('.title-item').hover(function (e) {
        $('.title-item').removeClass('select');//清除所有的select样式
        $(this).addClass('select');//当前加上select样式
        index = $(this).index();//改变index值
        //console.log($(this).index());
        $('.module').hide();
        $('.module').eq(index).show();//显示对应div
    }, function () {

    });

});

function start() {
    if (!hasStarted) {
        hasStarted = true;
        timer = setInterval(autoPlay, 2000);
    }
}
function stop() {
    clearInterval(timer);
    hasStarted = false;
}

function autoPlay() {
    ++index;
    if (index > 4) {
        index = 0;//复位
    }
    //console.log(index);
    //上面title轮播
    $('.title-item').removeClass('select');//清除所有select样式
    $('.title-item').eq(index).addClass('select');
    //下面内容轮播
    $('.module').hide();
    $('.module').eq(index).show();
}