在导航栏中保留突出显示的标签 [英] keeping highlighted tab in navigation bars

问题描述

感谢您的宝贵时间. 在突出显示我正在使用的导航栏上的活动"标签时，我遇到了很多麻烦.我正在尝试通过CSS来执行此操作，但是当我更改页面时会出现问题.我将添加以下代码:
function updateMenu(num)
{

thanks for your time. I've been having a lot of trouble trying to highlighting the "active" tab on a navbar i am using. I'm trying to do this through CSS but the problem arises when I change pages. I will add the following code:
function updateMenu(num)
{

var menuCode =

var menuCode =

'<ul id="menu">'+
'<li><a href="software/menu.php" onclick="updateMenu(1);"';
if(num == 1){menuCode +=' class="current"';}
menuCode += '>Software</a></li>' +
'<li><a href="users/menu.php" onclick="updateMenu(2);"';
if(num == 2){menuCode +=' class="current"';}
menuCode += '>Software</a></li>';

'<ul id="menu">' +
'<li><a href="software/menu.php" onclick="updateMenu(1);"';
if(num == 1){menuCode +=' class="current"';}
menuCode += '>Software</a></li>'+
'<li><a href="users/menu.php" onclick="updateMenu(2);"';
if(num == 2){menuCode +=' class="current"';}
menuCode += '>Software</a></li>';

document.getElementById("cssMenu").innerHTML = menuCode;
}

document.getElementById("cssMenu").innerHTML = menuCode;
}

我的清单如下:

And my list goes as follows:

<ul id="menu">

<li><a href="software/menu.php" onclick="updateMenu(1);">Software</a></li> <li><a href="user/menu.php" onclick="updateMenu(2);">Users</a></li> </ul>

<li><a href="software/menu.php" onclick="updateMenu(1);">Software</a></li> <li><a href="user/menu.php" onclick="updateMenu(2);">Users</a></li> </ul>

由于在updateMenu函数中编写了所有代码，因此我觉得这是一个毫不含糊的解决方案，我想知道是否有更优雅的解决方案来解决我的问题. (您可以看到它正在移动"class = current"，因此CSS可以正常工作.)

I feel it's an unelegant solution because of all the code wrote in the updateMenu function and i was wondering if there was a more elegant solution to my problem. (You can see it's on moving the "class=current" so the CSS works properly).

推荐答案

我不确定您的确切要求是什么.假设单击该选项卡后不会转到另一页，则以下代码将有助于[请使用 jQuery] :

I'm not sure what your exact requirement is. Assuming that on clicking the tab, it does NOT go to another page, the following code will help [please use Jquery]:

HTML:

<ul id="menu">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

JavaScript:

Javascript :

<script>
 $(document).ready(function(){
  $("#menu li").click(function(){
    $("#menu li").removeClass("highlight");
    $(this).addClass("highlight");
 });
});
</script>

CSS:

.highlight {
 background: #f00;
}

这篇关于在导航栏中保留突出显示的标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！