選項卡的製作

NO IMAGE

html部分

1、在body中建立這些其中current這個class名很重要;選項卡的關鍵

<body>
    <div class="box">
        <ul class="tab_box">
            <li class="current">css</li>
            <li>html</li>
            <li>js</li>
        </ul>
        <div class="body_box">
            <div class="current">css很好</div>
            <div>html很好</div>
            <div>js很好</div>
        </div>
    </div>
</body>

css部分

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

        .box {
            width: 600px;
            border: 1px dashed darkseagreen;
            margin: auto
        }

        ul {
            width: 100%;
            height: 50px;
            display: flex;
            /* 彈性盒子模型 */
        }

        ul li {
            flex: 1;
            text-align: center;
            line-height: 50px;
            color: #333;
            font-size: 25px
        }

        ul li:hover {
            background-color: salmon
        }

        ul li.current {
            /* ul下的li 有current類名的li */
            background: salmon
        }

        .body_box {
            width: 100%;
            height: 200px;
            overflow: hidden;
        }

        .body_box div {
            text-align: center;
            line-height: 200px;
            font-size: 50px;
            background: rgba(199, 92, 181, 0.5);
            display: none
        }

        .body_box div.current {
            /* body_box 下的帶有current類名的div才有當前的樣式 */
            display: block
        }
    </style>
    

js部分

<script>
    /* 
       有current 類名的li 會有被選中的樣式
       有current 類名的div 會被顯示出來
       //實現點擊上邊的li對應顯示下邊的div

     */
    var tabs = document.getElementsByTagName('li'),
        bodys = document.querySelectorAll('.body_box div')
        
    //點擊tab 切換
    for (var i = 0; i < tabs.length; i++) {
        //tabs[i]每一個tabs
        tabs[i].myIndex = i;
        tabs[i].onclick = function () {
           
            //點擊哪個元素 就有背景色
            //也就是給點擊的元素加上current類名即可
            //現在的缺陷是點擊當前元素可以加上類名但是其他的標籤沒有被移除
            //解決方式是添加之前先都全部移除current類名然後再給對應元素添加

            /* this.className='current'; */
            for (var j = 0; j < tabs.length; j++) {
                tabs[j].className = ''   //清楚所有li的類名
                bodys[j].className = ''  //清楚所有body div 的類名
            }
            this.className = 'current'
            //點擊第幾個li 就讓第幾個div顯示
            //怎麼知道你點擊的是第幾個li
            //通過this.myIndex 可以知道當前點擊元素的索引
            //bodys[this.myIndex]是當前要顯示的div

            bodys[this.myIndex].className = 'current'
            //this.myIndex 當前點擊元素的索引
        }
    }

</script>

關鍵點

1、主要的思想在於當我們點擊那個li時 那個li的背景顏色就要變化

2、在他變化的同時且下邊的div 的 display 屬性也需要變化 而我們開頭說的current這個class名 就是關鍵,當我們點擊某個li的時候我們就令其他的li div的class名清空

for (var j = 0; j < tabs.length; j++) {
                tabs[j].className = ''   
                bodys[j].className = ''  
            } 

在清空後我們再給我們當前點擊的這個li 以及他對應的div賦上current這個class名

 this.className = 'current'
bodys[this.myIndex].className = 'current'

這樣我們就實現了選項卡

相關文章

堆內存,棧內存的的銷燬

任意數求和解析

用正則驗證身份證,手機號的合法性(寬鬆)

call、apply、bind學不會,來砍我!!!!——輕生前端