Question

我有一个模板，每个页面都有一个页眉和一个页脚。导航是其中的一部分。

问题是：

要突出显示当前选项卡，id必须为id =“current”

所以它看起来像这样：

<ul>
 <li><a href="#" id="current">Home</a></li>
 <li><a href="#">Discuss</a></li>
 <li><a href="#">Buy</a></li>
</ul>

在这种情况下，Home会突出显示，其余部分则不会。

当我点击“讨论”时，会发生两件事。

1）调用相关的php页面 2）应该突出显示！

最好的方法是什么？我是否必须调用一个能够清除id值的javascript函数并将其更改为另一个dom？但dom是用id设置的！

还有其他方法吗？

我在实现这一目标的最佳方式上有点失落。

提前感谢您的帮助！

Answer 1

您不想更改ID。你想要的是一个名为current的 class ，你添加到标签：

<ul class="navigation">
 <li><a href="#" class="current">Home</a></li>
 <li><a href="#">Discuss</a></li>
 <li><a href="#">Buy</a></li>
</ul>

我建议使用jQuery。然后你可以绑定一个这样的函数：

$("ul.navigation li").click(function() {
  // load page
  ...code here...
  // set tab
  $("ul.navigation li.current").removeClass("current");
  $(this).addClass("current");
});

Answer 2

你有几个选择。

首先，您可以通过服务器端代码（即PHP，.NET，无论您使用的是什么）动态地将id添加到正确的元素。

但是那样，你有点滥用身份证。您应该只是更改CSS规则以将突出显示应用于类current而不是id的元素。然后，您可以通过服务器端代码应用该类，或使用Javascript在客户端应用该类。

动态更改导航菜单的html id值

2 个答案: