-3

我在网页中使用 CSS 菜单，我想知道如何突出显示 CSS 菜单的选定菜单项。我在下面粘贴了 HTML/CSS 代码。任何人都可以通过发布突出显示菜单项的代码片段来帮助我吗？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <title>Generated by Pure CSS Menu.com : Free CSS Drop Down Menu Generator</title>
    <meta name="description" content="Online CSS Menu Maker. Create No-Javascript, 100% CSS Dropdown Menu in seconds! Horizontal css menu & Vertical css menu." />
</head>
<body bgcolor="#ffffff">



<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
    margin:0px;
    list-style:none;
    padding:0px 1px 1px 0px;
    background-color:#A5A5A5;
    background-repeat:repeat;
    border-color:#A6A6A6;
    border-width:0px;
    border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
    display:block;
    zoom:1;
    float: left;
}
ul.pureCssMenu ul{
    width:0px;
}
ul.pureCssMenu li{
    display:block;
    margin:1px 0px 0px 1px;
    font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#FFFFFF;
    border-width:0px;
    border-color:#FCEEB0;
    border-style:solid;
    text-align:left;
    text-decoration:none;
    padding:5px;
    _padding-left:0;
    font:normal 11px Arial;
    color: #000000;
    text-decoration:none;
    cursor:pointer;
}
ul.pureCssMenu span{
    overflow:hidden;
}
ul.pureCssMenu li {
    float:left;
}
ul.pureCssMenu ul li {
    float:none;
}
ul.pureCssMenu ul a {
    text-align:left;
    white-space:nowrap;
}
ul.pureCssMenu li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
}
ul.pureCssMenu li.sep span{
    float:none; padding-right:0;
    width:3;
    height:100%;
    display:inline-block;
    background-color:#A6A6A6;   background-image:none;}
ul.pureCssMenu ul li.sep span{
    width:100%;
    height:3;
}
ul.pureCssMenu li:hover{
    position:relative;
}
ul.pureCssMenu li:hover>a{
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:normal 11px Arial;
    color: #FFFFFF;
    text-decoration:none;
}
ul.pureCssMenu li a:hover{
    position:relative;
    background-color:#FF1C1C;
    border-color:#4C99AB;
    border-style:solid;
    font:normal 11px Arial;
    color: #FFFFFF;
    text-decoration:none;
}
ul.pureCssMenu li.dis a {
    color: #AAAAAA !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:5px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def  {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def{display:none}
ul.pureCssMenu span{
    display:block;
    background-image:url(./images/arrv_blue_2.gif);
    background-position:right center;
    background-repeat: no-repeat;
   padding-right:8px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white_2.gif);
}
ul.pureCssMenu a:hover span{    _background-image:url(./images/arrv_white_2.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_blue_2.gif)}
ul.pureCssMenu ul li:hover > a span{    background-image:url(./images/arr_white_2.gif);}
ul.pureCssMenu li a.pureCssMenui0{
font:n;
}
ul.pureCssMenu li a.pureCssMenui0:hover{
font:o;
}
</style>
<!-- End PureCSSMenu.com STYLE -->



<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Home</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->



<!-- (c) 2009, PureCSSMenu.com -->


<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
4

3 回答 3

2

我想你想要的是上课

ul.pureCssMenuSelected {
   //whatever the selection should look like
}

然后，在您访问的每个 html 页面中，将该类添加到该页面所引用的选项中。

<ul class="pureCssMenu pureCssMenum">
    <li class="pureCssMenui0"><a class="pureCssMenui0 pureCssMenuSelected" href="#">Home</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">About us</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">FAQ</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Gallery</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Forums</a></li>
    <li class="pureCssMenui0"><a class="pureCssMenui0" href="#">Contact us</a></li>
</ul>

这当然是因为 html 无法猜测所选项目的含义。

PS：可能您可能不想在该选项上使用锚链接。

PPS：正如其他人提到的，如果您在同一页面中使用链接，则需要使用 javascript。在 jQuery 中，代码可以是：

$('a').click(function() { 
    $('.pureCssMenuSelected').removeClass('pureCssMenuSelected');
    $(this).addClass('pureCssMenuSelected'); 
}

此外，直接在 HTML 中将类 pureCssMenuSelected 添加到最初选择的项目中。最后，如果您使用最后一个解决方案，请将其命名为纯CSS 菜单以外的名称 :)

于 2012-04-13T08:37:57.353 回答
1

如果您在单个页面中使用此链接您也可以使用 jquery

$('.pureCssMenu li a').click(function () {
$('.pureCssMenu li a').removeClass('selected');
$(this).addClass('selected');
});

（或者）

您正在重定向到另一个页面，创建一个类并将该类添加到重定向页面中的相应链接。
我希望这能帮到您...

于 2012-04-13T08:47:08.410 回答
1

如果您分别在所有页面中使用菜单，您可以添加一个class突出显示菜单中相关项目的选项，webdreamer如上所述。

如果您使用菜单作为母版页中的控件，您应该找到当前页面并手动添加类。如果您可以使用，您可以使用.addClass()和 .removeClass()JQuery执行此项目单击

于 2012-04-13T08:51:58.423 回答