Question

网上有很多关于如何构建漂亮菜单/标签的内容。 jQuery中有很多菜单插件。

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

我希望在普通的html / css / JS中使用单头文件，以便对文件进行的任何样式更改都会显示更新的菜单。

例如，假设有三个菜单（没有子菜单）Home，Tuts，Contact Us。我可以使用CSS创建<ul>和样式。我可以在<a>内ul，以便我可以将点击指向不同的网页。我将整个<ul>放在单独的文件header.jsp中，并将该文件包含在我的每个页面的顶部，以便对header.jsp的任何更改都将反映到所有页面。但是，我如何确保当我点击菜单和页面打开时，该菜单仍然以某种方式突出显示（例如backcolor），以便了解该页面属于哪个菜单。

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标签，比如东西。

Answer 2

试试这个

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

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

2 个答案: