如圖要實現不同欄目的切換，點選某個標題就切換對應的欄目塊，這裡我們利用jQuery來實現
我們的總體的思路是實現板塊的隱藏和顯示，點選相應的板塊，就將對應的板塊顯示出來，點選另外一個就隱藏，那麼這裡我們每一個模組都有顯示框，如何實現點選時事，就找到對應的時事的模組，是我們需要解決的問題。
比如我們點選時事的時候，通過時事的id來獲取到時事對應的模組，那麼這裡我們可以設定時事的標題和模組的id相同。
那麼我們先將大概的框架寫出來

具體的HTML和CSS程式碼如下

<ul>
            <li>時事</li>
            <li
 
>體育</li>
            <li>政治</li>
        </ul>
        <div>時事欄目</div>
        <div>體育欄目</div>
        <div>政治欄目</div>

CSS程式碼

ul{
    list-style: none;
    margin-bottom: 0;
}
ul li{
    width: 100px;
    height: 50px;
    border: 1px solid gray
 
;
    background-color: lightgray;
    display: inline-block;
    line-height: 50px;
    text-align: center;
    font-family: "微軟雅黑";
    font-size: 18px;
}
div{
    width: 310px;
    height: 200px;
    border: 1px solid grey;
    text-align: center;
    line-height: 200px;
    margin-left: 40px;
    margin-top
 
: 0px;
    position: relative;
}

下面我們先給每個li一個點選事件，點選不同的欄目主題時相應的li的背景顏色發生變換，

$(function(){
    $("li").click(function(){      
        $(this).css("background-color","aquamarine");
    })
})

由於這裡我們需要點選下一個li元素之前需要將所有的li的背景顏色重置為最初的顏色。所以還需要新增如下程式碼

$(function(){
    $("li").click(function(){
        $("li").css("background-color","lightgray")
        $(this).css("background-color","aquamarine");
    })
})

那麼現在我們點選下一個li元素的時候前面的li的背景就已經被重置了

接下來我們的任務就是點選li時顯示對應的div
那麼怎樣找到正確的div呢，這裡我們需要通過id來尋找
通過this找到li的id，如果li的id和div的id相等，就替換

 id= $(this).attr("id");

這裡我們通過attr(“id”);屬性來查詢對應的li的id，這裡的this返回的時點選的li的jQuery物件。
我們同樣可以通過控制檯來檢驗一下是否能夠獲取到正確的id

可以看到我們點選對應的li，返回的對應的li的id
拿到了點選的li元素的id之後我們就可以和div的id進行匹配。
那麼如何遍歷所有的div呢，這裡我們可以通過$(“div”).each(index,val)進行遍歷

  $("div").each(function(i,val){
            console.log(i);
            console.log(val);
        })

i為div陣列的索引值，val為整個div的標籤

那麼這裡我們點選依次li，就返回所有的div的索引值和對應的標籤
這裡我們有個投機取巧的方式，是把li的id設定為和div的index的下標相同分別對應為0，1，2下面我們在遍歷div的時候如果div的陣列下標和li的id相同，那麼我們就進行相應的div的顯示，否則就隱藏，這裡我們還要注意將li的第二個元素和最後一個元素$(“li:eq(1)，li:last-child”).hide;進行隱藏。

$("div:eq(1),div:last-child").hide();//預設為隱藏

同時還要注意遍歷div的時候，這裡的this代表的是當前的div，而點選事件的中的this是當前選中的li，

 $("div").each(function(i,val){
//          console.log(i);
//          console.log(val);
         if(id== i){
            $(this).show();
         }else{
            $(this).hide();
         }

        })

同時還要注意利用(“div”).each(function(i,val))each函數裡面還有一個function。同時返回的當前的div利用$(“div”).each(function(i,val))each函數裡面還有一個function。同時返回的當前的div利用$(this)代替
那麼現在我們總體的額效果就已經實現了