开发者社区> cometwo123> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

自己动手丰衣足食之tab选项卡(第一个可拓展轮播图)

简介:
+关注继续查看

下载地址http://download.csdn.net/detail/cometwo/9393614

(用这个) 下载地址:http://download.csdn.net/detail/cometwo/9467997

这里写图片描述


<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tab标签选项卡切换jQuery特效</title>

        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 12px;
                color: #666;
                text-align: left;
            }

            h1 {
                text-align: center;
                border: 1px solid red;
            }
            h1 a{
                text-decoration: none;
            }
            .tabbox {
                width: 500px;
                height: 140px;
                margin: 100px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }

            .tabbox .tab {
                overflow: hidden;
                background: yellow;
            }

            .tabbox .tab a {
                display: block;
                padding: 10px 20px;
                float: left;
                text-decoration: none;
                color: blue;
            }

            .tabbox .tab a:hover {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .tab a.on {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .content {
                overflow: hidden; 
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 100px;
            }

            .tabbox .content li {
                width: 500px;
                height: 100px;
                float: left;
            }

            .tabbox .content li p {
                padding: 30px;
            }
        </style>

    </head>

    <body>

        <!-- 代码部分begin -->
        <div class="tabbox">
            <div class="tab">
                <a href="javascript:;" class="on">tab1</a>
                <a href="javascript:;">tab2</a>
                <a href="javascript:;">tab3</a>
                <a href="javascript:;">tab4</a>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                </ul>
            </div>
        </div>

        <h1><a href="index.html">效果一</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="index2.html">效果二</a></h1>

        <script src="js/jquery-1.8.3.min.js"></script>
        <script>
            $(function() {
                $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
                $(".tabbox .tab a").mouseover(function() {
                    $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index();      //检索当前元素的位置是第几个
                    number = index;      //定义全局变量
                    var distance = -500 * index;
                    $('.tabbox .content ul').stop().animate({
                        left: distance
                    });
                });
                var auto = 1; //等于1则自动切换,其他任意数字则不自动切换,轮播图的原理就是这样做的
                if (auto == 1) {
                    var number = 0;
                    var maxNumber = $('.tabbox .tab a').length;

                    function autotab() {
                        number++;
                        number == maxNumber ? number = 0 : number;
                        $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
                        var distance = -500 * number;
                        $('.tabbox .content ul').stop().animate({
                            left: distance
                        });
                    }
                    var tabChange = setInterval(autotab, 3000);
                    //鼠标悬停暂停切换
                    $('.tabbox').mouseover(function() {
                        clearInterval(tabChange);
                    });
                    $('.tabbox').mouseout(function() {
                        tabChange = setInterval(autotab, 3000);
                    });
                }
            });
        </script>
        <!-- 代码部分end -->

    </body>

</html>

拓展:增加滑动选项卡下过http://blog.csdn.net/libin_1/article/details/50379286

这里写图片描述

源码:

<!DOCTYPE HTML>
<html>

    <head>
        <meta charset="UTF-8" />
        <title>实例:jQuery弹性滑动导航菜单</title>
        <style type="text/css">
            body {
                font-size: 100%;
                font-family: "Microsoft YaHei", "Arial";
                background: #fff;
            }

            #nav {
                position: relative;
                width: 832px;
                border: 1px solid green;
                margin: 100px auto 0 auto;
                border-bottom: 3px solid #00FFFF;
            }

            #nav .nav-menu {
                height: 50px;
            }

            #nav .nav-menu a {
                display: block;
                float: left;
                height: 50px;
                padding: 0 40px;
                line-height: 50px;
                color: black;
                font-size: 16px;
                text-decoration: none;
            }

            #nav .nav-current {
                position: absolute;
                bottom: -3px;
                height: 3px;
                overflow: hidden;
                background: red;
            }
        </style>
        <script id="jquery_172" type="text/javascript" class="library" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript">
            $(function() {
                (function() {
                    //                  var $navcur = $(".nav-current");
                    //                  var $nav = $("#nav");
                    //                  var current = ".current";
                    var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
                    var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
                    alert(itemW + '' + defLeftW);
                    //添加默认下划线
                    $(".nav-current").css({
                        width: itemW,
                        left: defLeftW
                    });
                    //hover事件
                    $("#nav").find("a").hover(function() {
                        var index = $(this).index(); //获取滑过元素索引值
                        var leftW = $(this).position().left; //获取滑过元素Left值
                        var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                        $(".nav-current").stop().animate({
                            left: leftW,
                            width: currentW
                        }, 300);
                    }, function() {
                        $(".nav-current").stop().animate({
                            //                          left: defLeftW,
                            //                          width: itemW
                            left: leftW,
                            width: currentW            //鼠标离开不动
                        }, 300)
                    })
                })();
            });
        </script>
    </head>

    <body>
        <div id="nav">
            <div class="nav-menu">
                <a href="#" class="current">首页</a>
                <a href="#">了解我们</a>
                <a href="#">产品展示</a>
                <a href="#">服务报价</a>
                <a href="#">最新消息</a>
                <a href="#">联系方式</a>
            </div>
            <div class="nav-current"></div>
        </div>
    </body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>鼠标滑过Tab选项卡切换特效</title>
        <style type="text/css">
            /*reset*/

            html,
            body,
            p,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            form,
            input,
            textarea,
            select,
            button,
            fieldset,
            legend,
            img,
            ul,
            ol,
            li,
            dl,
            dt,
            dd,
            th,
            td,
            pre,
            blockquote {
                margin: 0;
                padding: 0
            }

            html {
                height: 100%;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                -webkit-font-smoothing: antialiased
            }

            body {
                background-color: #eee;
                color: #666;
                min-height: 100%;
                height: auto!important;
                height: 100%
            }

            body,
            button,
            input,
            select,
            textarea,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6 {
                font: 12px/1 "宋体", "Microsoft Yahei", arial, simhei
            }

            table {
                border-collapse: collapse;
                border-spacing: 0
            }

            img,
            fieldset {
                border: 0;
                vertical-align: middle
            }

            a {
                text-decoration: none
            }

            a:visited {}

            a:hover {
                text-decoration: underline
            }

            a:active {}

            ul,
            li,
            ol {
                list-style: none
            }

            strong,
            b {
                font-weight: normal
            }

            em,
            i {
                font-style: normal
            }

            iframe {
                display: block
            }

            fieldset {
                border: 1px solid #c0c0c0;
                margin: 0 2px 18px;
                padding: 0.35em 0.625em 0.75em
            }

            legend {
                border: 0;
                padding: 0;
                white-space: normal;
                *margin-left: -7px
            }

            sup {
                vertical-align: text-top
            }

            sub {
                vertical-align: text-bottom
            }

            s {
                text-decoration: none;
            }
            /*public*/

            .fl {
                display: inline;
                float: left
            }

            .fr {
                display: inline;
                float: right
            }

            .cf:after {
                content: "";
                clear: both;
                display: block;
                height: 0;
                overflow: hidden
            }

            .cf {
                zoom: 1
            }

            .pb10 {
                padding-bottom: 10px
            }

            .mt10 {
                margin-top: 10px
            }
            /*main*/

            .case {
                width: 960px;
                margin: 100px auto;
                background: #fff;
                padding: 15px;
                box-shadow: 0 0 10px #ccc;
            }

            .case .title {
                height: 20px;
                border-bottom: 3px solid #e7e7e7;
                padding-bottom: 10px;
            }

            .case .title h2 {
                font-size: 20px;
                font-family: "microsoft yahei";
            }

            .case .title-list {
                position: relative;
                top: 6px;
                border: 1px solid red;
            }

            .case .title-list li {
                width: 146px;
                line-height: 20px;
                text-align: center;
                float: left;
                background: palegreen;
                display: inline;
                cursor: pointer;
            }

            .case .title-list li.on {
                color: red;
                font-weight: bold;
            }

            .case .title-list p {
                position: absolute;
                top: 24px;
                left: 0px;
                width: 146px;
                height: 7px;
                border-top: 3px solid #ff6600;
                overflow: hidden;
                text-align: center;
            }

            .case .title-list b {
                display: inline-block;
                width: 0;
                height: 0;
                margin-top: -3px;
                border-style: solid dashed dashed dashed;
                /*画倒三角*/
                border-width: 9px;
                border-color: #ff6600 #fff #fff #fff;
                /*画倒三角*/
                overflow: hidden;
                zoom: 1;
                font-size: 0;
            }

            .product {
                height: 268px;
                position: relative;
                overflow: hidden;
                display: none;
                margin-top: 20px;
            }

            .product ul {
                position: absolute;
                left: 0px;
            }

            .product-wrap .show {
                display: block;
            }

            .product-wrap .product li {
                float: left;
                display: inline;
                margin-left: 13px;
                background: #f3f3f3;
                border: 2px solid #fafafa;
                transition: 0.4s;
                -webkit-transition: 0.4s;
                -moz-transition: 0.4s;
                -o-transition: 0.4s;
                -ms-transition: 0.4s;
            }

            .product-wrap .product li.ml0 {
                margin-left: 0px;
            }

            .product-wrap .product li a.imgwrap {
                display: block;
                width: 226px;
                height: 200px;
                background: #fff;
                text-align: center;
            }

            .product-wrap .product li p {
                padding-left: 15px;
                color: #666666;
                line-height: 22px;
            }

            .product-wrap .product li p a {
                color: #666666;
                text-decoration: none;
            }

            .product-wrap .product li p a:hover {
                color: #ff6600;
                text-decoration: none;
            }
        </style>
        <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
        <script type="text/javascript" src="js/zzsc.js"></script>
    </head>

    <body>

        <div class="case">
            <div class="title cf">
                <h2 class="fl">设计案例</h2>
                <ul class="title-list fr cf ">
                    <li class="on">LOGO</li>
                    <li>宣传单</li>
                    <li>画册</li>
                    <li>优惠券</li>
                    <li>会员卡</li>
                    <p><b></b></p>
                </ul>
            </div>
            <div class="product-wrap">
                <!--案例1-->
                <div class="product show">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank">站长素材网站logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/1.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例2-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/2.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例3-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/3.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
                <!--案例4-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/4.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>

                <!--案例5-->
                <div class="product">
                    <ul class="cf">
                        <li class="ml0">
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                        <li>
                            <a href="http://www.zzsck.org" target="_blank" class="imgwrap">
                                <img src="images/5.jpg">
                            </a>
                            <p class="mt10"> <a href="http://www.zzsck.org" target="_blank"> 深圳达文影视传媒有限公司logo... </a></p>
                            <p class="pb10">行业类别:艺术摄影,文化体育</p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div style="text-align:center;clear:both">
            <p>更多资源请到<a href="http://www.zzsck.org/js">js特效</a>下载!</p>
        </div>
        <script type="text/javascript">
            $(function() {
                //设计案例切换
                $('.title-list li').mouseenter(function() { //可以改为click
                    var liindex = $(this).index();
                    $(this).addClass('on').siblings().removeClass('on');
                    $('.product-wrap div.product').eq(liindex).fadeIn(550).siblings('div.product').hide();
                    var liWidth = $('.title-list li').width();
                    $('.case .title-list p').stop(false, true).animate({
                        'left': liindex * liWidth + 'px'
                    }, 300);
                });








                //设计案例hover效果
                $('.product-wrap .product li').hover(function() {
                    $(this).css("border-color", "blue");
                    $(this).find('p > a').css('color', 'red');
                    $(this).find('p').css('color', 'red');
                }, function() {
                    $(this).css("border-color", "#fafafa");
                    $(this).find('p > a').css('color', '#666666');
                    $(this).find('p').css('color', '#666666');
                });
            });
        </script>
    </body>

</html>

根据以上的例子对第一个做可滑动选项卡(自动滑动关闭)

这里写图片描述

 <!DOCTYPE html>
<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>tab标签选项卡切换jQuery特效</title>
        <meta http-equiv="refresh" content="100">
        <script src="js/jquery-2.1.0.min.js"></script>
        <style>
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 12px;
                color: #666;
                text-align: left;
            }

            .tabbox {
                width: 500px;
                height: 140px;
                margin: 10px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }

            .tabbox .tab {
                position: relative;
                overflow: hidden !important;
                background: pink;
                border-bottom: 1px solid blueviolet;
            }

            .tabbox .tab a {
                position: relative;
                display: block;
                padding: 10px 20px;
                float: left;
                text-decoration: none;
                color: blue;
                border: 0px solid red;
            }

            .tabbox .tab a:hover {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .tab a.on {
                background: red;
                color: green;
                text-decoration: none;
            }

            .tabbox .content {
                overflow: hidden;
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 100px;
            }

            .tabbox .content li {
                width: 500px;
                height: 100px;
                float: left;
            }

            .tabbox .content li p {
                padding: 30px;
            }

            #btn {
                position: absolute;
                bottom: 0px;
                height: 2px;
                overflow: hidden;
                background: black;
            }
        </style>

    </head>

    <body>

        <!-- 代码部分begin -->
        <div class="tabbox">
            <div class="tab">
                <a href="javascript:;" class="on">tab1</a>
                <a href="javascript:;">tab2</a>
                <a href="javascript:;">tab3</a>
                <a href="javascript:;">tab4</a>
                <div id="btn"></div>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                </ul>
            </div>
        </div>

        <script>
            $(function() {
                var itemW = $(".tab").find(".on").innerWidth();
                $('#btn').css('width', itemW);
                $(".tab").find("a").hover(function() {
                    var index = $(this).index(); //获取滑过元素索引值
                    var leftW = $(this).position().left; //获取滑过元素Left值
                    var currentW = $(".tab").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                    $('#btn').stop(true, true).animate({
                        left: leftW,
                        width: currentW
                    }, 300);
                }, function() {
                    $('#btn').stop(true, true).animate({
                        //                          left: defLeftW,
                        //                          width: itemW
                        left: leftW,
                        width: currentW //鼠标离开不动
                    }, 300)
                })
                $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
                $(".tabbox .tab a").mouseover(function() {
                    $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index(); //检索当前元素的位置是第几个
                    number = index; //定义全局变量
                    var distance = -500 * index;
                    $('.tabbox .content ul').stop().animate({
                        left: distance
                    });
                });
                var auto = 0; //等于1则自动切换,其他任意数字则不自动切换
                if (auto == 1) {
                    var number = 0;
                    var maxNumber = $('.tabbox .tab a').length;

                    function autotab() {
                        number++;
                        number == maxNumber ? number = 0 : number;
                        $('.tabbox .tab a:eq(' + number + ')').addClass('on').siblings().removeClass('on');
                        var distance = -500 * number;
                        $('.tabbox .content ul').stop().animate({
                            left: distance
                        });
                    }
                    var tabChange = setInterval(autotab, 300);
                    //鼠标悬停暂停切换
                    $('.tabbox').mouseover(function() {
                        clearInterval(tabChange);
                    });
                    $('.tabbox').mouseout(function() {
                        tabChange = setInterval(autotab, 3000);
                    });
                }
            });
        </script>
        <!-- 代码部分end -->

    </body>

</html>

根据以上的例子对第一个做可滑动选项卡(自动滑动关闭)

这里写图片描述

这个在做的时候添加样式后看到 li 元素浮动无效

.tabbox .content {
                /*overflow: hidden;*/
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 200px;
            }

            .tabbox .content li {
                width: 500px;
                height: 200px;
                float: left;
                border: 1px solid chartreuse; 
                /*可以看到浮动无效*/
            }

这里写图片描述

不过不用怕,添加了JS就好了
这里写图片描述

代码:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实例:jQuery弹性滑动导航菜单</title>
        <script src="js/jquery-2.1.0.min.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
                list-style: none;
            }

            body {
                font-size: 100%;
                font-family: "Microsoft YaHei", "Arial";
                background: #fff;
                text-align: left;
            }

            .tabbox {
                width: 500px;
                height: 250px;
                margin: 10px auto;
                background: #f0f0f0;
                font-family: '微软雅黑';
                border: 1px solid red;
            }
            #nav {
                position: relative;
                width:500px;
                border: 1px solid green;
                /*border-bottom: 3px solid #00FFFF;*/
            }

            #nav .nav-menu {
                height: 50px;
            }

            #nav .nav-menu a {
                display: block;
                float: left;
                height: 50px;
                padding: 0 10px;
                line-height: 50px;
                color: black;
                font-size: 16px;
                text-decoration: none;
            }

            #nav .nav-current {
                position: absolute;
                bottom: -3px;
                height: 3px;
                overflow: hidden;
                background: black;
            }

            .tabbox .content {
                /*overflow: hidden;*/
                width: 500px;
                height: 100px;
                position: relative;
            }

            .tabbox .content ul {
                position: absolute;
                left: 0;
                top: 0;
                width: 500px;
                height: 200px;
            }

            .tabbox .content li {
                width: 500px;
                height: 200px;
                float: left;
                border: 1px solid chartreuse; 

            }

            .tabbox .content li p {
                padding: 30px;
            }

        </style>


    </head>

    <body>
        <div class="tabbox">
            <div id="nav">
                <div class="nav-menu">
                    <a href="#" class="current">首页</a>
                    <a href="#">了解我们</a>
                    <a href="#">产品展示</a>
                    <a href="#">服务报价</a>
                    <a href="#">最新消息</a>
                    <a href="#">联系方式</a>
                </div>
                <div class="nav-current"></div>
            </div>
            <div class="content">
                <ul>
                    <li>
                        <p>tab1内容1</p>
                    </li>
                    <li>
                        <p>tab1内容2</p>
                    </li>
                    <li>
                        <p>tab1内容3</p>
                    </li>
                    <li>
                        <p>tab1内容4</p>
                    </li>
                    <li>
                        <p>tab1内容5</p>
                    </li>
                    <li>
                        <p>tab1内容6</p>
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        $(function() {
            (function() {
                //                  var $navcur = $(".nav-current");
                //                  var $nav = $("#nav");
                //                  var current = ".current";
                var itemW = $("#nav").find(".current").innerWidth(); //默认当前位置宽度
                var defLeftW = $("#nav").find(".current").position().left; //默认当前位置Left值
                //  alert(itemW + '' + defLeftW);
                //添加默认下划线
                $(".nav-current").css({
                    width: itemW,
                    left: defLeftW
                });
                //hover事件
                $("#nav").find("a").hover(function() {
                    var index = $(this).index(); //获取滑过元素索引值
                    var leftW = $(this).position().left; //获取滑过元素Left值
                    var currentW = $("#nav").find("a").eq(index).innerWidth(); //获取滑过元素Width值
                    $(".nav-current").stop().animate({
                        left: leftW,
                        width: currentW
                    }, 300);
                }, function() {
                    $(".nav-current").stop().animate({
                        //                          left: defLeftW,
                        //                          width: itemW
                        left: leftW,
                        width: currentW //鼠标离开不动
                    }, 300)
                });


        $('.tabbox .content ul').width(500 * $('.tabbox .content li').length + 'px');
              $(".tabbox #nav a").mouseover(function() {
                   $(this).addClass('on').siblings().removeClass('on');
                    var index = $(this).index();      //检索当前元素的位置是第几个
                   number = index;      //定义全局变量
                  var distance = -500 * index;
                  $('.tabbox .content ul').stop().animate({
                       left: distance
                   });
             });   









            })();
        });
    </script>

</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
#私藏项目实操分享# 【练习案例React十】封装一个锚点tab栏
#私藏项目实操分享# 【练习案例React十】封装一个锚点tab栏
0 0
#私藏项目实操分享# 【练习案例React九】封装一个标题显示栏
#私藏项目实操分享# 【练习案例React九】封装一个标题显示栏
0 0
自动化测试教程(8)下拉框定位
下拉框我们要学会熟练使用,下拉框再平时网页当中很常见,而下拉框定位使我们专门处理下拉框内容,点击输入的。
0 0
React 16.x折腾记 - (3) 结合Mobx实现一个比较靠谱的动态tab水平菜单,同时关联侧边栏
动态tab水平菜单,这个需求很常见,特别是对于后台管理系统来说 实现的思路有点绕,有更好的姿势请留言,谢谢阅读。
0 0
【Vue3从零开始-实战】S15:详情页tab栏核心样式开发
【Vue3从零开始-实战】S15:详情页tab栏核心样式开发
0 0
封装实践——打造微信底部tab栏
目前市面上很多App都采用底部一个Tab栏,管理四到五个Tab,然后选择切换页面的方式的设计,这虽然不太符合metro design,但确是一个不容易出错而又符合国人使用习惯的设计方式。
822 0
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
【Vue3从零开始-实战】S16:详情页样式优化及tab栏内容联动功能实现
0 0
搭建完菜单后运行不显示菜单的原因及其解决方法(拼图小游戏)
在搭建完菜单以后,程序不报错也能运行,但是运行结果就是一个框,就跟没有搭建过菜单一样,如下图所示,没有我们想象中的菜单栏,更别说有下拉菜单了,但是如果将搭建菜单的代码单独放到一个测试类中去测试一下的话,会显示出来菜单,也就是说我们搭建菜单的核心代码是没有问题的
0 0
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载