优化Tab页签跟随主题样式效果

ruoyi-admin/src/main/resources/static/css/skins.css

@@ -1026,3 +1026,65 @@
 .fixed-sidebar.theme-blue.mini-navbar .nav li:hover>.nav-second-level {
     background-color: rgba(15,41,80,1);
 }
+
+/* tab页签样式 */
+.page-tabs a {
+	color: rgba(0,0,0,0.65)!important;
+	padding: 0 8px 0 8px;
+	min-width: 50px;
+	text-align: center;
+	line-height: 26px;
+	border-radius: 2px;
+	margin:5px 0 0 4px;
+	border: 1px solid #d9d9d9;
+}
+
+.page-tabs a.active:hover, .page-tabs a.active i:hover {
+	color: #000000!important;
+	background: #f5f5f5!important;
+}
+
+.page-tabs a.active:hover i {
+	color: #ffffff!important;
+}
+
+.page-tabs a.active i:hover {
+	color: #ffffff!important;
+	background: transparent!important;
+}
+
+.page-tabs a.active i {
+	color: #ffffff;
+}
+
+/* tab页签主题样式 */
+.skin-blue .page-tabs a.active {
+	color: #ffffff!important;
+	background: #1890ff!important;
+	border: 1px solid #1890ff;
+}
+
+.skin-purple .page-tabs a.active {
+	color: #ffffff!important;
+	background: #722ed1!important;
+	border: 1px solid #722ed1;
+}
+
+.skin-green .page-tabs a.active {
+	color: #ffffff!important;
+	background: #52c41a!important;
+	border: 1px solid #52c41a;
+}
+
+.skin-red .page-tabs a.active {
+	color: #ffffff!important;
+	background: #dd4b39!important;
+	border: 1px solid #dd4b39;
+}
+
+.skin-yellow .page-tabs a.active {
+	color: #ffffff!important;
+	background: #f39c12!important;
+	border: 1px solid #f39c12;
+}
+

ruoyi-admin/src/main/resources/templates/index-topnav.html

@@ -291,7 +291,7 @@
             </button>
             <nav class="page-tabs menuTabs">
                 <div class="page-tabs-content">
-                    <a href="javascript:;" class="active menuTab" th:data-id="@{/system/main}">首页</a>
+                    <a href="javascript:;" class="menuTab" th:data-id="@{/system/main}">首页</a>
                 </div>
             </nav>
             <button class="roll-nav roll-right tabRight">
@@ -392,6 +392,11 @@ function applyPath(url) {
     }
 }
 
+//默认激活页签
+function tabActive() {
+	$('.menuTab[data-id="' + ctx + 'system/main"]').addClass('active');
+}
+
 $(function() {
 	var lockPath = storage.get('lockPath');
 	if($.common.equals("history", mode) && window.performance.navigation.type == 1) {
@@ -399,6 +404,7 @@ $(function() {
 	    if ($.common.isNotEmpty(url)) {
 	    	applyPath(url);
 	    } else {
+	        tabActive();
 	    	$(".navbar-toolbar li a").eq(0).click();
 	    }
 	} else if($.common.isNotEmpty(lockPath)) {
@@ -413,6 +419,7 @@ $(function() {
 	    	if($.common.equals("history", mode)) {
 	    		storage.set('publicPath', "");
 	    	}
+	        tabActive();
 	    	$(".navbar-toolbar li a").eq(0).click();
 	    }
 	}

ruoyi-admin/src/main/resources/templates/index.html

@@ -237,7 +237,7 @@
             </button>
             <nav class="page-tabs menuTabs">
                 <div class="page-tabs-content">
-                    <a href="javascript:;" class="active menuTab" th:data-id="@{/system/main}">首页</a>
+                    <a href="javascript:;" class="menuTab" th:data-id="@{/system/main}">首页</a>
                 </div>
             </nav>
             <button class="roll-nav roll-right tabRight">
@@ -330,12 +330,19 @@ function applyPath(url) {
 	}
 }
 
+// 默认激活页签
+function tabActive() {
+    $('.menuTab[data-id="' + ctx + 'system/main"]').addClass('active');
+}
+
 $(function() {
 	var lockPath = storage.get('lockPath');
 	if($.common.equals("history", mode) && window.performance.navigation.type == 1) {
 		var url = storage.get('publicPath');
 	    if ($.common.isNotEmpty(url)) {
 	    	applyPath(url);
+	    } else {
+	        tabActive();
 	    }
 	} else if($.common.isNotEmpty(lockPath)) {
 	    applyPath(lockPath);
@@ -349,6 +356,7 @@ $(function() {
 	    	if($.common.equals("history", mode)) {
 	    		storage.set('publicPath', "");
 	    	}
+	        tabActive();
 	    }
 	}