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

【问题标题】：keeping highlighted tab in navigation bars在导航栏中保持突出显示的选项卡
【发布时间】：2012-04-27 17:10:49
【问题描述】：

感谢您的宝贵时间。我在尝试突出显示我正在使用的导航栏上的“活动”选项卡时遇到了很多麻烦。我正在尝试通过 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 正常工作）。

【问题讨论】：

标签： html css navigationbar

【解决方案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;
}

【讨论】：