Question

我使用下面的css作为我的菜单项。我需要在菜单栏中突出显示活动页面。任何人都可以纠正CSS。或者我可以使用javascript或某种类型的脚本吗？

#menu ul {
margin: 0;
padding: 7px 6px 0;
background: #b6b6b6 url('/Images/Overlay.png') repeat-x 0 -110px;
line-height: 100%;
border-radius: 1em;
font: normal 0.5333333333333333em Arial, Helvetica, sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
width 100%;
}
#menu li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
#menu a,
#menu a:link {
font-weight: bold;
font-size: 16px;
color: #444444;
text-decoration: none;
display: block;
padding: 8px 20px;
margin: 0;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
#menu a:hover {
background: #000;
color: #fff;
}
#menu .active a,
#menu li:hover > a {
background: #bdbdbd url('/Images/Overlay.png') repeat-x 0 -40px;
background: #666666 url('/Images/Overlay.png') repeat-x 0 -40px;
color: #444;
border-top: solid 1px  #f8f8f8;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
text-shadow: 0 1px 0 #ffffff;
}
#menu ul ul li:hover a,
#menu li:hover li a {
background: none;
border: none;
color: #666;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu ul ul a:hover {
background: #7d7d7d url('/Images/Overlay.png') repeat-x 0 -100px !important;
color: #fff !important;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
#menu li:hover > ul {
display: block;
}
#menu ul ul {
display: none;
margin: 0;
padding: 0;
width: 185px;
position: absolute;
top: 40px;
left: 0;
background: url('/Images/Overlay.png') repeat-x 0 0;
border: solid 1px #b4b4b4;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
#menu ul ul li {
float: none;
margin: 0;
padding: 3px;
}
#menu ul ul a,
#menu ul ul a:link {
font-weight: normal;
font-size: 12px;
}
#menu ul:after {
content: '.';
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

* html #menu ul { 身高：1％; }

<div id="menu">
                <ul>
                    <li><a href="Update.aspx" title="Update"><span>Home</span></a></li>
                    <li><a href="Save.aspx" title="Save"><span>Save</span></a></li>
                    <li><a href="User.aspx" title="User"><span>User</span></a></li>
                </ul>
            </div>

Answer 1

这不能只通过css来完成，你需要使用一些jQuery或PHP将活动类添加到当前页面链接，然后通过css设置样式

检查这些

Stackoveflow question with same problem

Solution from css tricks

Answer 2

为什么所有棘手的JavaScript或jQuery？这可以通过一些简单的CSS和HTML轻松完成。

为活动页面创建一个CSS类，例如：

.active{
background-color:white;
color:red;

}

然后在每个页面上，将导航栏中的班级.active添加到当前页面中的任何菜单项，例如：

**在Update页面上：**

<div id="menu">
                <ul>
                    <li><a href="Update.aspx" class="active" title="Update"><span>Home</span></a></li>
                    <li><a href="Save.aspx" title="Save"><span>Save</span></a></li>
                    <li><a href="User.aspx" title="User"><span>User</span></a></li>
                </ul>
            </div>

因此，在导航栏中<li>为当前页面的每个页面上，只需添加class="active"，如上所示。

Answer 3

必须发生两件基本事情：

要触发的功能。
然后该功能必须以某种方式影响样式。

可能有很多方法可以做到这一点。但最好的方法是什么？让我们看看一些不同的选项

要触发的功能

onclick手动嵌入到每个菜单元素中
在文档加载时将onclick事件动态注入每个菜单项
某种元素的事件监听器
类的事件监听器
每个菜单项的特定id的多个事件侦听器

在任何情况下，您都需要onclick事件或事件监听器。 onclick更直接。

<a onclick="myFunction()">Home</a>

通过这种方式，您可以查看HTML，并立即知道onclick事件与其相关联。无论函数的触发器是嵌入在HTML元素中，还是嵌入<script>标记中的事件监听器，无论哪种方式，都必须有一种方法来识别元素以便更改样式。因此，该元素需要id。

<a id="menuHome" onclick="myFunction()">Home</a>

即使您使用this关键字，仍然需要id。 this.id

<body>
 <a id="myId" onclick="runIt(this.id)">Home</a>
</body> 

<script type="text/javascript">
    function runIt(argInput) {
        alert("This is what was passed in: " + argInput);
    };
</script>

如果您单独使用this关键字，则在标记中不返回任何内容。

<a id="myId" onclick="runIt(this)">Home</a>

上面的代码行不会为您提供任何有关单击元素的引用的信息。

因此，即使使用this关键字，也需要一种方法来识别点击的元素。

更改样式

要更改菜单项的样式，可以使用以下代码：

<body>
 <a id="myId" onclick="runIt(this.id)">Home</a>
</body> 

<script type="text/javascript">     
    function runIt(argInput) {
        //alert("This is what was passed in: " + argInput);
        var whatMenuItem = argInput;
        var objectElement = document.getElementById(whatMenuItem);
        objectElement.style.color = "green";        
    };
</script>

上面的代码将菜单项的颜色更改为绿色。

或者您可能希望在文档加载时动态地将onclick个事件注入每个菜单项。这个jsFiddle展示了如何做到这一点。

jsFiddle Inject onclick events into menu anchor tags

在jsFiddle示例中，不仅使用了id，还使用了class。为什么？为了遍历菜单中的每个<a>标记，需要以某种方式检索该信息。它通过以下方式检索：

document.getElementsByClassName("className")

现在您还有一件事添加到您的HTML中。

<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a></li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a></li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a></li>
    </ul>
</div>

此jsFiddle显示使用事件侦听器更改菜单样式：

jsFiddle Event Listener - Change Style

确定单击了哪个菜单元素并更改该菜单元素的样式只是所需内容的一部分。如果用户导航到另一个菜单，则需要有一种方法将菜单项恢复为原始样式。

这个jsFiddle显示了一个完整的工作示例，突出显示当前菜单项，记录哪个菜单项是最新的，将旧菜单项设置回默认值，并检查用户是否点击了两次活动菜单项。

jsFiddle Highlight Active Menu Item on Menu Bar

突出显示菜单栏上的活动菜单项

3 个答案:

要触发的功能

更改样式