html 程式碼

<div class="data_bodey">
    <div class="index_nav" >
        <ul style="height: 30px; margin-bottom: 0px;">
            <li class="l_left total_chose_fr nav_active">實時監測</li>
            <li class="l_left total_chose_pl" >統計分析一</li>
            <li class
 
="l_left total_chose_pl">統計分析二</li>
            <li class="r_right total_chose_pl">統計分析三</li>
            <li class="r_right total_chose_pl">統計分析四</li>
            <li class="r_right total_chose_pl">統計分析五</li>
        </ul>

js程式碼

$(function(){
    // index();
 

    $(".index_nav ul li").each(function(index){
        $(this).click(function(){
            $(this).addClass("nav_active").siblings().removeClass("nav_active");  //,當前按鈕變色,去掉 上一個點選按鈕變色
//siblings() 方法返回被選元素的所有同級元素。
            $(".index_tabs .inner").eq(index).fadeIn().siblings("div").stop().hide(); //隱藏
//eq() 方法返回帶有被選元素的指定索引號的元素。
 
fadeIn() 方法逐漸改變被選元素的不透明度，從隱藏到可見（褪色效果）。註釋：隱藏的元素不會被完全顯示（不再影響頁面的佈局）

            if(index==1){
                yingXiao();
            }else if(index==2){
                shouRu();
            }else if(index==3){
                AnQuan();
            }else if(index==4){
                user();
            }else if(index==5){
                manage();
            }
        })
    });
    $(".tabs ul li").each(function(index){
       $(this).click(function(){
           $(".tabs ul li div .div").removeClass("tabs_active");
           $(this).find("div .div").addClass("tabs_active");
           $(".tabs_map>div").eq(index).fadeIn().siblings("div").stop().hide();
       })
   });
    $(".middle_top_bot ul li").each(function(){
        $(this).click(function(){
            $(".middle_top_bot ul li").removeClass("middle_top_bot_active");
            $(this).addClass("middle_top_bot_active");
        })
    });

});