保持导航栏中突出显示的选项卡

Question

谢谢你的时间。 我在尝试突出显示我正在使用的导航栏上的“活动”标签时遇到了很多麻烦。我试图通过CSS来做到这一点但是当我改变页面时会出现问题。我将添加以下代码：
function updateMenu(num)
{

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"';}

  

我觉得这是一个不太优雅的解决方案，因为updateMenu函数中编写了所有代码，我想知道是否有更优雅的解决方案来解决我的问题。 （您可以看到它正在移动“class = current”，因此CSS可以正常工作）。

Answer 1

我不确定你的具体要求是什么。假设在点击标签时，它不会转到另一个页面，以下代码将有所帮助[请使用Jquery]：

HTML：

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

Javascript：

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

CSS：

.highlight {
 background: #f00;
}