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

時間 2019-12-09

標籤前端實用功能選項切換简体版

原文原文鏈接

工做過程當中，遇到不少特別經常使用的小功能，可是寫起來又比較費勁，因而一點一點整理出了一些使用頻率較高的小功能，這裏分享源碼，但願對你們有幫助！css

選項卡切換html

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

html代碼spa

　　　　　　<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代碼3d

　　　　　　　* {
                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添加了不一樣的樣式code

那麼這就是個人選項卡的樣式htm

JS代碼blog

　　　　　　　　  $("#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");/*相對應的第幾個內容區顯示，其餘的隱藏*/
                });