求個后臺管理系統(tǒng) 多標簽切換（類似于tab切換頁面）案例

現(xiàn)在在做一個后臺管理系統(tǒng)，技術(shù)選型是傳統(tǒng)jquery，我想做一個多標簽切換的功能，我感覺這個功能很實用、用戶體驗也不錯，由于我自己現(xiàn)在也沒什么好的思路，在這里想問一下有做過這樣功能的嗎？或者提供一個思路也可以。萬分感謝！

下圖是我想實現(xiàn)的樣子 （PS:這是我找的截圖）。

圖片描述

回答

編輯回答

茍活

左邊菜單點擊跳轉(zhuǎn)和頂部tabs跳轉(zhuǎn)點擊事件都是跳到同樣的路由
頂部tabs生成由你點擊左部菜單生成。
好的，現(xiàn)在開始重點了。

生成tabs

var tabs=[];
$('左邊菜單').on('click'，function(){
  //獲取點擊菜單的名字及路由.這種數(shù)據(jù)可以存放在dom上 <li data-name='菜單名字' data-path='path'></li>
  var tab ={
   name:'菜單1'，
   path:'/path1'
  }
  var hasTab = tabs.findIndex(t => t.name === tab.name)
  if(hasTab === -1){
   this.tabs.push(tab)
  }
  careaTabs(tabs)
})

tabs點擊事件

//動態(tài)生成的dom事件需要代理到已經(jīng)存在的dom上
$(document).on('click','.liClass',function(){
   ///
 })

好了，大概就是這樣，純手打

2017年11月5日 06:29

編輯回答

壞脾滊

框架很多，能直接拿就沒必要動手寫重復代碼

簡單的一個tab切換demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        #tabs > li.active{
            text-decoration: underline;
        }
        #tabs > li{
            list-style: none;
            display: inline-block;
            float: left;
            padding: 5px 10px;
        }
        #tabs > li:hover{
            text-decoration: underline;
            cursor: pointer;
        }
        #tabContent{
            clear: left;
        }
        #tabContent > div{
            display: none;
            border: 1px solid gray;
            width: 300px;
            height: 100px;
        }
        #tabContent > div.active{
            display: block;
        }
    </style>
</head>
<body>


<ul id="tabs">
    <li role="tab1Content" class="active">tab1</li>
    <li role="tab2Content">tab2</li>
    <li role="tab3Content">tab3</li>
    <li role="tab4Content">tab4</li>
</ul>

<div id="tabContent">
    <div class="active" id="tab1Content">tab1 text</div>
    <div id="tab2Content">tab2 text</div>
    <div id="tab3Content">tab3 text</div>
    <div id="tab4Content">tab4 text</div>
</div>


<script src="jquery.js"></script>
<script>

    $(function(){

        $("#tabs > li").on('click', function(){
            $(this).parent().find("li").removeClass("active");
            $(this).addClass("active");
            var role = $(this).attr("role");
            $("#tabContent > div").hide();
            $("#tabContent > div#" + role).show();
        });
        
    })

</script>

</body>
</html>

2018年7月2日 14:13

編輯回答