技術標籤：jQueryjavascript

使用jQuery實現點選切換內容

css樣式如下：

        * {margin: 0;padding: 0;}
        #tab li {float: left;list-style: none;width: 80px;height: 40px;line-height: 40px;cursor: pointer;text-align: center;}
        #container {position: relative;}
        #content1, #content2, #content3 {width: 300px;height: 100px;padding: 30px;position: absolute;top: 40px;left: 0;}
        #tab1, #content1 {background-color: #ffcc00;}
        #tab2, #content2 {background-color: #ff00cc;}
        #tab3, #content3 {background-color: #00ccff;}
 

HTML程式碼如下：

<h2>點選li切換顯示內容</h2>
<ul id="tab">
    <li id="tab1" value="1">10元套餐</li><!--下標為0 -->
    <li id="tab2" value="2">30元套餐</li><!--下標為1 -->
    <li id="tab3" value="3">50元包月</li><!--下標為2 -->
</ul>
<div id="container">
    <div id="content1"><!--下標為0 -->
        10元套餐詳情：<br/>&nbsp;每月套餐內撥打100分鐘，超出部分2毛/分鐘
    </div>
    <div id="content2" style="display: none"><!--下標為1 -->
        30元套餐詳情：<br/>&nbsp;每月套餐內撥打300分鐘，超出部分1.5毛/分鐘
    </div>
    <div id="content3" style="display: none"><!--下標為2 -->
        50元包月詳情：<br/>&nbsp;每月無限量隨心打
    </div>
</div>
 

實現思路

讓需要點選的li的下標和所點選的li要顯示的內容的下標相對應即可,
那麼知道點選的li的下標既可以利用此下標來修改對應的內容的display值

基礎版程式碼實現如下：

//獲取按鈕集合
        let $liList = $('#tab li');
    //獲取內容容器集合
    let $divList = $('#container div');
    //初始版
    //給每一個li繫結點選事件
    $liList.click(function(){
        //獲取當前點選的li的索引值
       let clickIndex = $(this).index();
       //將所有的li對應的顯示的內容的display都設定為none
       $divList.css('display','none');
       //讓當前點選的li的display屬性設定為block
       $divList[clickIndex].style.display = 'block';
    });
    /*
        存在問題:
            當我點選對應的li的時候,程式也會去操作所有和此次點選事件不相關的li的display屬性值,
            導致程式碼做了許多不必要的操作
        解決方案:
            如果我知道上一次點選過的li,和此次點選的li,那麼我只將上次點選的li對應要顯示的內容的display值改為none
            再將此次點選的li對應要顯示的內容的display值改為block,那麼其它不相關的內容的屬性值就不會去操作了
            定義一個識別符號,用來儲存上一次的li對應的下標
     */
 

進階版程式碼實現如下：

    //獲取按鈕集合
    let $liList = $('#tab li');
    //獲取內容容器集合
    let $divList = $('#container div');

    //進階版
    //設定識別符號,用來記錄上次點選的li的下標,預設為0,因為預設選中第一個li
    let index = 0;
    //給每一個li繫結點選事件
    $liList.click(function(){
        //獲取當前點選的li的索引值
        let clickIndex = $(this).index();
        //將上一次的li的下標對應的內容的display設定為none
        $divList[index].style.display = 'none';
        //將此次點選的li對應的內容的display設定為block
        $divList[clickIndex].style.display = 'block';
        //將此次點選的li的下標存起來,以便下一次點選做準備
        index = clickIndex;
    });
    /*
        存在問題:
            此方法解決了那些程式碼執行不相關的li對應內容的display屬性值,
            但是當我們重複點選同一個li的時候,並不需要對此li以及上一次點選的不同的li對應內容的display值做任何操作
            導致當我們重複點選同一個li時,又執行了許多次不必要的程式碼
        解決方法:
            我們只需要在修改display值前面新增一個if判斷條件即可,
            即判斷此次點選的li的索引值(clickIndex)和上一次點選的索引值(index)
     */

最終版程式碼實現如下：

    //獲取按鈕集合
    let $liList = $('#tab li');
    //獲取內容容器集合
    let $divList = $('#container div');  

  
    //最終版

    //點選按鈕事件繫結
    //定義標識變數  記錄上一次顯示的內容容器的索引值
    let index = 0;
    //給每一個li繫結點選事件
    $liList.click(function () {
        // 獲取當前點選的索引值
        let clickIndex = $(this).index();
        //if用來去重點選判斷
        if (clickIndex === index){
            return
        }else{
            // 將上一次對應索引值的元素隱藏
            $divList[index].style.display = 'none';
            //當前點選元素顯示
            $divList[clickIndex].style.display = 'block';
            //更新下標
            index = clickIndex;
        }
    })

如果還有更好的優化方法，還請提出意見，如有寫的不對的地方會及時糾正。