jQuery實現滑動tab選項卡

本文例項為大家分享了實現滑動tab選項卡的具體程式碼，供大家參考，具體內容如下

先上最終效果:

jQuery實現滑動tab選項卡

需求分析:

1.選項卡選單數量不固定，選單內容不固定，導致了單個選單和整體的寬度都是未知的，
2.第一個需求導致滑塊寬度也是不固定的
3.為了讓互動效果更好，滑塊需要新增過度動畫

對滑塊的需求導致滑塊和選單的html結構必須分離，並使用了jQuery的offset方法獲取並設定位置，所有的div都使用了相對定位。

本案例的TAB選項卡可以比較方便的拓展、重複使用，只需修改少量值就可以直接食用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0908</title>
    <script src="http://lib.sinaapp.com//jquery/1.7.2/jquery.min.js"></script>
    <style>
        /*container容器只是為了水平居中，如不需要可以去掉這層巢狀*/
        .container{
            left: 50%;
            margin-top: 100px;
            float: left;
            cursor:pointer;
            position: relative;
        }
        .BG{
            right: 50%;
            font-size: 0;www.cppcns.com 

            background-color: #f2f2f2;
            border-radius: 30px;
            position: relative;
        }
        .container div{
            font-size: 16px;
            line-height: 60px;
        }
        .list{
            float: left;
            display: inline-block;
            padding: 0 50px;
            transition: color 0.5s;
            position: relative;
            z-index: 1;
        }

        /*這裡的listH和listA順序不能換，有優先順序，當listA被使用時listH不起作用*/
        .listH{
            color: #ff8300;
        }
        .listA{
            color: #fff;
        }

        /*滑塊*/
       www.cppcns.com 
 #active{
            width: 100px;
            height: 60px;
            border-radius: 30px;
            background-color: #ff8300;
            box-shadow: 0 5px 16px 0 rgba(255,144,0.58);
            position: relative;
            z-index: 0;
            transition: left 0.5s,width 1s;
        }
    </style>
    <script>
        $(document).ready(function () {

            /*設定預設啟用的選項卡eq(i)*/
            var aL = $(".list:eq(1)");
            $("#active").width(aL.innerWidth());
            $("#active").offset(aL.offset());
            aL.addClass("listA");

            /*為每個按鈕新增點選事件*/
            $(".list").click(function() {
                $("#active").width($(this).innerWidth());   //設定寬度
                $("#active").offset($(this).offset());   //設定位置
                $(this).addClass("listA");
                $(".list").not(this).removeClass("listA");
            });

            /*hover效果*/
            $(".list 
").hover(function () {
                $(this).addClass("listH")
            },function () {
                $(this).removeClass("listH")
            })

        });
    </script>
</head>
<body>
<div class="connpTQrutainer">
    <div class="BG">
        <div class="list">one</div>
        <div class="list">twotwo</div>
        <div class="list">threethreethree</div>
        <div class="list">four</div>
        <div class="list">fivefivefive</div>
        <div id=http://www.cppcns.com"active"></div>
    </div>
</div>
</body>
</html>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。

jQuery實現滑動tab選項卡

需求分析:

jQuery實現滑動tab選項卡

JS面向物件程式設計實現的Tab選項卡案例詳解

微信小程式實現滾動Tab選項卡

uniapp實現頂部tab選項卡

jQuery實現tab選項卡效果

JavaScript實現Tab選項卡切換

bootstrap實現tab選項卡切換

js 實現tab選項卡

Vue手寫tab選項卡，底部滑動動畫

qt tablewidget 實現tab來回切換_原生JS實現TAB選項卡切換效果

從零開始搭建Wpf基礎6-Tab選項卡MVVM實現

Vue實現Tab選項卡切換

js開發外掛實現tab選項卡效果

小程式實現多個選項卡切換

jQuery實現滑動開關效果

微信小程式上拉載入分頁資料---包括tab選項卡切換（優化方案）

Java全棧之Tab選項卡的正確使用方法。

Tab選項卡

jquery經典例項之選項卡

ES6學習-封裝tab選項卡

jQuery實現滑動tab選項卡

需求分析:

相關推薦