Question

我找到了一个菜单示例，并希望在我的网站中使用它。当鼠标进入菜单项时，其样式会发生变化，但当鼠标离开菜单项时，其样式与之前的样式相同。用户看不到选择了哪个菜单项。它是css代码部分：

  .navigation ul#topnav li{
        width:auto;
        float:left;
        padding:0;
        position:relative;
    }
    .navigation ul#topnav li a{
        color:#fff;
        background-color:inherit;
        padding:0 7px;
        text-align:center;
        display:block;
        border-left:5px solid transparent !important;
        border-right:5px solid transparent !important;
        position: relative;
        z-index: 50;
    }
    .navigation ul#topnav li a:hover{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }

我希望鼠标在点击后退出菜单项，其样式显示为悬停，用户可以看到选择了哪个项目。

Answer 1

因为您正在使用Jquery，所以您可以执行以下操作：

$(function(){
    $('.navigation ul#topnav li a').hover(
      function(){
        //remove the active class from all links on mouseover
        $('.navigation ul#topnav li a').removeClass('.active');
      },
      function(){
        //add active class to current link on mouseout
        $(this).addClass('active');
      }
    );
});

...然后在css中为活动类添加样式：

.navigation ul#topnav li a.active{
  /*your styles*/
}

Answer 2

你必须使用jquery。

$('.links').click(function(){
    $(this).addClass('clicked');
});

然后为点击链接设置样式。

.clicked{
    color:red;
}

Answer 3

将您的第三个CSS选择器更新为：

.navigation ul#topnav li a:hover, .navigation ul#topnav li a.selected {

...以便这些设置同时应用于正在悬停的<a>和任何具有“已选定”类别的<a>。或者，如果您希望点击的链接在悬停样式上有一些变化，请将.navigation ul#topnav li a.selected {添加为单独的条目。

然后在单击链接时在JS代码中添加“selected”类并从其他任何类中删除该类：

$("#topnav li a").click(function() {
    // whatever else you do on click, then

    $(this).addClass("selected");
    $("#topnav li a").not(this).removeClass("selected");
});

编辑：将该代码放在$(document).ready()处理程序或页面末尾的脚本块中。

工作演示：http://jsfiddle.net/VFJ7c/

注意：我假设（我认为其他答案是假设的）您的菜单是通过Ajax加载内容或显示和隐藏现有内容。如果您的菜单具有重新加载整个页面的标准链接，那么这将无法工作，您需要将“选定”类应用于服务器端代码中的相应链接，或者在DOM-ready上执行此操作而不是点击。

Answer 4

您还可以为选定状态添加新样式：

    .navigation ul#topnav li a:selected{
     //Your Style Here
    }

Answer 5

需要添加另一个类并在点击时将其添加到元素中。

JS

$('.navigation ul#topnav li a').click(function(){
    $(this).addClass('active');
});

CSS

.navigation ul#topnav li a.active{
        color:#824d97;
        background-color:inherit;
        background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important;
        border-left:5px solid #6c1b93 !important;
        border-right:5px solid #6c1b93 !important;
    }

Answer 6

为它制作javascript / jQuery代码。

OnLoad / ready DOM

的jQuery

$(".navigation ul#topnav li").click(function() {
     if($(this).hasClass("selected")) {
         $(this).removeClass("selected");
     } else {
         $(this).addClass("selected");
     } 
});

CSS

.navigation ul#topnav li.selected {
    background-color:#selectedcolor
}

Answer 7

尝试以下方法：

.navigation ul#topnav li a:visited{ 
    color:#824d97; 
    background-color:inherit; 
    background:url(../images/nav-hover-bg.png) repeat-x 0 0 !important; 
    border-left:5px solid #6c1b93 !important; 
    border-right:5px solid #6c1b93 !important; 
}

如何设置点击<a> tag style?</a>

7 个答案: