1

网上有很多 tuts 解释如何构建好看的菜单/标签。jQuery中有很多菜单插件。

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

我希望在普通的 html/css/JS 和单个头文件中执行此操作，以便对文件进行的任何样式更改都将显示更新的菜单。

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

4

2 回答 2

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 tabs 之类的东西。

于 2013-02-14T07:28:45.807 回答
1

试试这个

HTML

 <ul>
  <li id="lnkHome">Home
  </li>
  </ul>

脚本

<script>
        $(document).ready(function (event) {
            $("#lnkHome").addClass("highlight");
     });

    </script>

CSS

.highlight
{
    color: Black;
    -moz-box-shadow: inset 0 0 20px #000000;
    -webkit-box-shadow: inset 0 0 20px #000000;
    box-shadow: inset 0 0 20px #000000;
}
于 2013-02-14T07:30:40.067 回答