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

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

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

我的清单如下：

<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>

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

Answer 1

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 :

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

CSS :

.highlight {
 background: #f00;
}