JS特效之Tab標籤切換

時間 2019-11-24

原文原文鏈接

　　在咱們平時瀏覽網站的時候，常常看到的特效有圖片輪播、導航子菜單的隱藏、tab標籤的切換等等。這段時間學習了JS後，開始要寫出一些簡單的特效。今天我也分享一個簡單tab標籤切換的例子。先附上代碼：javascript

HTML代碼：css

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/tab.js" type="text/javascript" ></script>
        <style type="text/css">
        li {
            list-style: none;
        }
            * {
                padding: 0;
                margin: 0;
            }
            
            .tab-list  {                
                text-align: center;
                line-height: 40px;
                font-family: "微軟雅黑";
                height: 40px;
                border-bottom: none;
            }
            .tab-list  li {            
                float: left;
                border: 1px solid #000;
                border-right: none;
                width: 100px;
                cursor: pointer;
            }
            .tab-list li:last-of-type {
                border-right: 1px solid #000;
            }
            .tab-content  li {
                
                width: 302px;
                height: 300px;
                border: 1px solid #000;
                text-align: center;
                line-height: 300px;
                margin-top: 0px;
            }
        </style>
    </head>
    <body>
        <div class="tab">
            <ul class="tab-list">
                <li>one</li>
                <li>two</li>
                <li>three</li>
            </ul>
            <ul class="tab-content">
                <li style="background-color:cornflowerblue;">我是one</li>
                <li style="display: none;background-color: burlywood;">我是two</li>
                <li style="display: none;background-color:mediumaquamarine;">我是three</li>
            </ul>
        </div>
    </body>
</html>

JS代碼：html

var  eItemList = document.querySelectorAll(".tab-list li");
            var eContentList = document.querySelectorAll(".tab-content li");
            //給元素編號
             for (var i=0;i<eItemList.length;i++) {
                 eItemList[i].index=i;  //index是自定義屬性，用來保存編號                 
                 eItemList[i].onmouseover=function() {
                 for (var i=0;i<eContentList.length;i++) {
                 eContentList[i].style.display="none";        //先將內容所有隱藏                  
                 }
                 eContentList[this.index].style.display="block";  //當鼠標觸發時再顯示對應的內容    
                 for (var i=0;i<eItemList.length;i++) {
                 eItemList[i].style.background="none";        //將背景色設置爲無                 
                 }
                 eItemList[this.index].style.background="indianred";
             };    
        }

效果以下：java

在作Tab標籤切換時，首先是先寫好總體框架。在這裏，先將內容區的三個div分別隱藏。而後當鼠標放在tab標籤上時，再執行相關操做，將div內容顯示出來。關鍵的問題是如何將標籤與內容區對應起來。因此，用 eItemList[i].index=i; 設置當前元素的編號。而後eContentList[this.index],將tab元素與內容區關聯起來。框架

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。