前端實用功能：選項卡切換

工作過程中，遇到很多特別常用的小功能，但是寫起來又比較費勁，於是一點一點整理出了一些使用頻率較高的小功能，這里分享源碼，希望對大家有幫助！

選項卡切換

---

 

這個功能主要還是由display:block  與  display:none之間通過點擊選項卡切換完成的

html代碼

　　　　　　<div>
            <ul id="hear"><!--選項卡列表，如果是底部選項卡，將hear  fixed到底部，側邊欄重新設置css-->
                <li class="action" style="color: #FF4200;border-bottom: 1px solid #FF4200;"><!--帶action的會默認選中-->
                    第一頁選項
                </li>
                <li>
                    第二頁選項
                </li>
                <li>
                    第三頁選項
                </li>
            </ul>
            <ul id="content">   <!--選項卡內容列表--> 
                <li class="action" id="content1"><!--帶action的會默認顯示-->
                    第一頁內容
                </li>
                <li id="content2">
                    第二頁內容
                </li>
                <li id="content3">
                    第三頁內容
                </li>
            </ul>

        </div>

這是包含選項卡所有內容的整體的div，選項卡的標題寫在第一個ul（#hear）中，每個選項卡的內容寫在第二個ul（#content）中，不一定必須是ul，總體格式是這樣就可以，選項卡的標題數目與選項卡的內容數目應對應相等，可以憑自己需要一起添加刪減。

CSS代碼

　　　　　　　* {
                margin: 0px;
                padding: 0px;
            }
            ul {
                list-style: none;
            }
            #hear{
                height: 50px;
                width: 400px;
                text-align: center;
                line-height: 50px;
            }
            #hear li {        /*第幾個選項卡的樣式，有幾個選項卡就有幾個*/
                width: 33.33%;
                float: left;
            }
            #content{
                margin-top: 30px;
            }
            #content li {                    /*讓所有內容頁隱藏*/
                display: none;
                width: 400px;
                border: 5px solid red;
                height: 200px;
            }
            
            #content .action {           /*讓選中的內容頁顯示*/
                display: block;
            }

根據自己的需求設計合適的css樣式，需要注意的一點是，需要顯示的內容添加一個組名.action，讓其display:block;其他的內容區全部隱藏。與需要顯示內容的content對應的選項卡標題也要設置一個action組，上面的HTML代碼中已經給出了第一個選項卡與第一個內容的action組，並且給選項卡名稱所在的li添加了不同的樣式

那么這就是我的選項卡的樣式

JS代碼

　　　　　　　　  $("#hear li").click(function() {       /*----------------選項卡的點擊事件，移動端用tap-----------------*/
                    $(this).css({/*選中選項卡的樣式*/
                        color: "#ff4200",
                        borderBottom: "1px solid #ff4200"

                    }).siblings().css({/*未選中選項卡的樣式*/
                        color: "#000000",
                        borderBottom: "none"
                    });
                });

                $("#hear li").click(function() { /*----------------選項卡的點擊事件，移動端用tap-----------------*/
                    $(this).addClass("action").siblings().removeClass("action");/*選中的li添加action類，其他的移除*/
                    var index = $(this).index();/*定義索引數值*/
                    $("#content li").eq(index).css("display", "block").siblings().css("display", "none");/*相對應的第幾個內容區顯示，其他的隱藏*/
                });

js代碼是使用jQuery寫的，可以直接在上方的代碼中修改想要的點擊切換樣式

下面的方法是點擊時給點擊的選項卡和相對應的選項卡內容添加action類，其他的兄弟元素移除action類，這樣就做到了切換效果

 

 

 

好啦這次的分享就到這里啦，下次我會繼續分享常用的小功能

我是Lnova，如果您有好的意見建議，請快快告訴我哦~