求个后台管理系统 多标签切换（类似于tab切换页面）案例

现在在做一个后台管理系统，技术选型是传统jquery，我想做一个多标签切换的功能，我感觉这个功能很实用、用户体验也不错，由于我自己现在也没什么好的思路，在这里想问一下有做过这样功能的吗？或者提供一个思路也可以。万分感谢！

下图是我想实现的样子 （PS:这是我找的截图）。

图片描述

阅读 10.7k

框架很多，能直接拿就没必要动手写重复代码

简单的一个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>

生成tabs

var tabs=[]; $('左边菜单').on('click'，function(){ //获取点击菜单的名字及路由.这种数据可以存放在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) })

求个后台管理系统多标签切换（类似于tab切换页面）案例

生成tabs

tabs点击事件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

图片沿着圆环的转动有什么方法吗？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

使用高德地图的海量点绘制和区域绘制，区域绘制会因为海量点导致卡顿，有什么好的优化方法？

求个后台管理系统 多标签切换（类似于tab切换页面）案例

生成tabs

tabs点击事件

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

前端代码更新如何通知用户刷新页面？

为什么会出现CORS error？

图片沿着圆环的转动有什么方法吗？

如何解决浏览器清除缓存导致axios请求404？

chrome控制台的$不是jquery ?

使用高德地图的海量点绘制和区域绘制，区域绘制会因为海量点导致卡顿，有什么好的优化方法？

求个后台管理系统多标签切换（类似于tab切换页面）案例