使用JS實現一個簡單的選項卡效果

不要情緒發表於2020-01-11
JS

實現以下效果

使用JS實現一個簡單的選項卡效果

使用到的知識點

HTML --- 結構

  • 需要實現一個選項卡，裡面有很多模組，因此首先需要一個div標籤去包裹
  • 選項卡的選項部分使用列表去實現 ul-li
  • 選項卡的內容可以使用div來實現，每一個內容使用一個div
<!--快速生成以下程式碼的快捷鍵 div.main>(ul>li*3{選項$})+div*3{內容$} -->
    <div class="main" id="main">
        <ul>
            <li>選項1</li>
            <li>選項2</li>
            <li>選項3</li>
        </ul>
        <div>內容1</div>
        <div>內容2</div>
        <div>內容3</div>
    </div>
複製程式碼

css ---樣式

  • 樣式中第一步就是清空預設樣式，一般是匯入清空樣式表，如果沒有這個樣式表，就把這個demo中用到的標籤的預設清空。
  • 外面的大盒子需要居中--因為它是塊級元素，因此，塊級元素居中使用到的是margin這個屬性，前提是給他一個寬度。
  • 選項卡部分需要的樣式
    • 首先列表屬於塊元素，它是獨佔一行的，但是我們實現的效果是在同一行，因此需要轉化（也可以使用浮動）；
    • 需要給每一個選項卡一個固定的高度和寬度，讓行高等於高度可以實現文字垂直居中。並且實現裡面的內容水平居中，文字的居中方式是text-align屬性；
    • 每一個選項卡需要一個邊框；
    • 當把下面的內容新增邊框以後，選項卡的邊框和內容的邊框都會有，因此這裡可以使用一個相對定位，讓選項卡向下方移動1畫素，top為正值就是向下；
  • 內容部分：和選項卡類似，但是不需要加寬度，可以讓他去繼承父元素的寬度。當選項卡沒選中時，內容部分是隱藏的，這裡使用display：none這種方法，因為這個隱藏是不佔位的。
  • 點選時：選項卡變色，內容也變色並且顯示
       * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .main {
            width: 500px;
            margin: 20px auto;
        }

        .main li {
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid #333;
            margin-right: 10px;
            position: relative;
            top: 1px;
            cursor: pointer;
        }

        .main div {
            height: 300px;
            line-height: 300px;
            text-align: center;
            border: 1px solid #333;
            display: none;
        }

        .main li.choose {
            background-color: steelblue;
            border-bottom-color: steelblue;
        }

        .main div.choose {
            background-color: steelblue;
            display: block;
        }
複製程式碼

js部分 ---行為

  • 第一步獲取想要操作的元素
  • 操作 ：在css部分通過新增class名實現點選，因此當點選那個選項卡使就給這個選項卡加那個class名
    • 迴圈遍歷每一個選項卡為它新增點選事件
    • 當點選時，首先需要清空所有的class名，然後給被點選的選項卡和相應的內容新增class這個類
<script>
        var main = document.getElementById("main");
        var list = main.getElementsByTagName("li");
        var con = main.getElementsByTagName("div");

        for(var i = 0;i<list.length;i++){
            // 文件在執行的時候，從上向下執行，並且把頁面中的所有程式碼包括js載入完成以後使用者才可以去實現點選，因此當使用者在點選的時候，i已經是3，因此在這裡我把每次迴圈的i值記錄一下；
            list[i].index = i;
            list[i].onclick = function(){
                for(var i = 0;i<list.length;i++){
                    list[i].className = "";
                    con[i].className = "";
                }
                var index = this.index;
                list[index].className = "choose";
                con[index].className = "choose";
            }
        }
    </script>
複製程式碼

選項卡的實現，難點在於滑鼠點選的時候i的值已經是最大值，所以需要使用一個值去記錄。

相關文章