html - 突出显示所选的选项卡/菜单

Question

网上流传着许多图解，解释如何构建美观的菜单/选项卡。 jQuery 中有很多菜单插件。

但是我不知道当我在与点击菜单对应的特定页面上时如何保持点击菜单突出显示。

我希望这在纯 html/css/JS 中完成，也希望在单个头文件中完成，以便对文件所做的任何样式更改都将显示更新的菜单。

例如，假设有三个菜单(没有子菜单)Home、Tuts、Contact Us。 我可以用 <ul> 创建它们和样式使用 CSS。我可以有 <a>里面ul这样我就可以直接点击不同的页面。我把整个<ul>在单独的文件 header.jsp 中，我将该文件包含在我的每个页面的顶部，以便对 header.jsp 的任何更改都会反射(reflect)到所有页面。但是，我如何才能确保当我点击菜单并打开页面时，该菜单会以某种方式(比如背景色)保持突出显示，从而让人了解该页面属于哪个菜单。

Answer 1

比如说，如果你在服务器上运行 PHP，URL 指向如下:

http://localhost/?tab=new

你最初的代码是这样的:

<ul class="tabs">
    <li>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

而在 PHP 中，您需要根据点击值执行的操作，您需要提供以下内容:

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>>New</li>
    <li>Old</li>
    <li>Bye</li>
</ul>

然后在.active 类中，编写规则。

---

完整代码如下:

<ul class="tabs">
    <li<?php if ($_GET["tab"] == "new") echo ' class="active"'; ?>><a href="/?tab=new">New</a></li>
    <li<?php if ($_GET["tab"] == "old") echo ' class="active"'; ?>><a href="/?tab=new">Old</a></li>
    <li<?php if ($_GET["tab"] == "bye") echo ' class="active"'; ?>><a href="/?tab=new">Bye</a></li>
</ul>

这是 PHP 的情况。根据您的语言更改它。

---

如果你想在同一个页面上做，那么你可以使用 jQuery 选项卡之类的东西。