Question

我在网页中使用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>

Answer 1

我猜你想要的是上课

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无法猜测所选项目的含义。

P.S。：可能你可能不想在该选项上使用锚链接。

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

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

此外，直接在HTML中将类pureCssMenuSelected添加到初始选择的项目中。最后，如果您使用最后一个解决方案，请将其称为 pure CSS菜单以外的其他内容：）

Answer 2

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

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

（或）

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

Answer 3

如果您单独使用所有页面中的菜单，则可以添加class，其中会突出显示菜单中的相关项目webdreamer。

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

如何突出显示菜单中的菜单项

3 个答案: