欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實現Tab欄切換的兩種方式案例詳解

 更新時間：2022年08月15日 08:43:40   作者：yule-i7  
這篇文章主要介紹了JS實現Tab欄切換的兩種方式,一種是面向過程的寫法，一種是面向對象的寫法，本文給大家分享詳細案例代碼，需要的朋友可以參考下

面向過程的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        div{
            width: 500px;
            border: 1px solid red;
        }
        ul{
            overflow: hidden;
        }
        ul>li{
            list-style: none;
            float: left;
            width: 50px;
            text-align: center;
        }
        div>div{
            height: 300px;
            background-color: pink;
            text-align: center;
            font-size: 50px;
        }
        #lastBox{
            display: none;
        }
        .selected{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li id="first" class="selected">1</li>
            <li id="last">2</li>
        </ul>
        <div id="firstBox">11111</div>
        <div id="lastBox">222222</div>
    </div>
    <script>
       var lis =  document.querySelectorAll('ul>li')
       var content =  document.querySelectorAll('div>div')
       //藏值  通過屬性來保存對應的值   通過對應的對象來藏
       //加所有l(wèi)i添加點擊事件
       for(var i=0;i<lis.length;i++){
            // lis[i].setAttribute('data-index',i)
            lis[i].index = i
            lis[i].onclick = function(){
                //排他思想 先將所有的全部設置一個值 然后再給自己設置一個值
                for(var j=0;j<lis.length;j++){
                    lis[j].className = ""
                }
                this.className = "selected"
                //排他
                //先將其他的都隱藏 再給自己顯示
                for(var j=0;j<content.length;j++){
                    content[j].style.display = "none"
                }
                // document.getElementById(this.id+'Box').style.display = 'block'
                // content[this.getAttribute('data-index')].style.display = 'block'
                content[this.index].style.display = 'block'
            }
       }
    </script>
</body>
</html>

面向對象的寫法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 400px;
            height: 400px;
            border: 2px solid pink;
            margin: 0 auto;
        }
        ul{
            display: flex;
            margin: 0 auto;
            width: 400px;
            position: relative;
        }
        ul>li{
            list-style: none;
            width: 100px;
            height: 50px;
            font-size: 40px;
            text-align: center;
            border: 1px solid white;
            background-color: yellow;

        }
        ul .showli{
            background-color: orange;
        }
        #box div{
            width: 400px;
            height: 350px;
            position: absolute;
            display: none;
        }

        #box .show{
            display: block;
            background-color: rgb(0, 183, 255);
            font-size: 80px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="box">
        <ul>
            <li class="showli">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

        <div class="show">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>
    <script>
        //用面向對象的思維寫tab欄切換
        //屬性：選項框，選項框對應要切換的頁面
        class Tab{
            constructor(ele){
                this.box = document.getElementById(ele);
                this.lis = this.box.querySelectorAll('ul > li');
                this.divs = this.box.querySelectorAll('div');
            }

            change()
            {
                // console.log(this.box);
                // console.log(this.lis);
                // console.log(this.divs);

                for(var i = 0; i < this.lis.length; i++)
                {
                    //保存當前this指向
                    var _this = this; 
                    //保存每一個li的下標，便于切換指定div
                    this.lis[i].index = i; 
                    //每一個li添加點擊事件
                    this.lis[i].onclick = function() 
                    {
                        
                        //排他，清空所有l(wèi)i與盒子的類名
                        for(var j = 0; j < _this.lis.length; j++) 
                        {
                            _this.lis[j].className = "";
                            _this.divs[j].className = "";
                        }
                        //單獨設置點擊的li類名，讓其樣式和其余未被點擊的li不同
                        this.className = "showli";

                        //檢查當前l(fā)i的下標是否成功保存
                        // console.log(this.index);

                        //讓li對應的div顯示出來
                        _this.divs[this.index].className = "show";
                    }
                    
                }
            }
        }

        var tab = new Tab("box");
        tab.change();

    </script>
</body>
</html>

到此這篇關于JS實現Tab欄切換的兩種方式的文章就介紹到這了,更多相關JS Tab欄切換內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

  • js字符串類型String常用操作實例總結

    js字符串類型String常用操作實例總結

    這篇文章主要介紹了js字符串類型String常用操作,結合實例形式總結分析了javascript字符串類型String常用方法及相關操作注意事項,需要的朋友可以參考下
    2019-07-07
  • 基于JavaScript實現焦點圖輪播效果

    基于JavaScript實現焦點圖輪播效果

    這篇文章主要為大家詳細介紹了基于JavaScript實現焦點圖輪播效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • webpack5新特性Asset?Modules資源模塊詳解

    webpack5新特性Asset?Modules資源模塊詳解

    這篇文章主要為大家介紹了webpack5新特性Asset?Modules資源模塊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
    2023-03-03
  • JavaScript制作簡單的框選圖表

    JavaScript制作簡單的框選圖表

    這篇文章主要為大家詳細介紹了JavaScript制作一個簡單的框選圖表，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-05-05

    • 最新評論