jquery - 页面打开后将菜单的颜色设置为与其悬停背景相同的颜色

Question

我在这样的页面上有一个水平菜单

<link rel="stylesheet" type="text/css" href="/classified/siteassets/css/mymenu.css" />
<div id="content-container">
<ul>
    <li><a href="http://mysite/Classified/Pages/Training.aspx">Training</a></li>
    <li><a href="http://mysite/Classified/Pages/Briefing.aspx">Briefing</a></li>     
    <li><a href="http://mysite/Classified/Pages/Resources.aspx">Resources</a></li>
</ul>
</div>

菜单样式如下：

#content-container {
    font-family: "Trebuchet MS", Verdana, serif;
    width:100%;
    margin:0 auto;
    padding:0;
}    
#content-container ul {
    border-bottom: 18px solid #C93;
    list-style: none;
    margin:0 -10px;;
    padding-bottom: 1px;
    overflow: visible;
    width:98%;
}    
#content-container ul li {
    float: left;
    padding:0;
    margin:0;
    text-align: center;
    width: 14.25%;
}    
#content-container ul li a {
    border-left: 1px #fff solid;
    line-height:36px;
    text-decoration:none;
    color:#ddd;
    background-color:#2E4B68;
    display:block;
    font-size:1.5em;

}
#content-container ul li a:hover {
    background-color: #C93;
    color:#000;
}

我需要做的是，当单击相应页面打开的链接之一时，我需要在打开的菜单选项卡上具有与其悬停颜色相同的颜色。我需要通过使用javascript检查url来查找打开的页面并使用jquery动态设置li项的背景颜色与其悬停颜色相同，以便用户知道这是当前打开的页面。我该怎么做呢？

Answer 1

使用 onclick 事件动态更改选项卡的背景颜色（在类中设置所需的颜色）。

完全希望，这个链接可以帮助你。

http://api.jquery.com/css/

Answer 2

我认为你想要的是这样的：

jQuery(document).ready(function(){
    jQuery("#content-container a").each(function(){
        if(jQuery(this).attr("href")==location.href)
              jQuery(this).css({"background-color": "#C93",color:"#000"});
    });
});

它将遍历您的菜单，查看链接是否与当前页面地址和样式匹配。

不过，您确实应该为此使用 css 类。

Ps：未经测试的代码。

Answer 3

$(function(){
  $("#content-container").on({"mouseover":function(){
// when you mouseover a 'ul li a' this event fires. store it's current background color
   $(this).data("background-color",$(this).css("background-color"));
  },"click":function(event){
// someone clicked it, grab the color and set the parent li background-color
   $(this).parent().css({background-color:$(this).data("background-color")});
  }},"ul li a", null);
});

Answer 4

尝试这个

$(document).ready( function() {
    $("#content-container ul li a").each(function(i, item) {
        if($(item).attr("href") == window.location) {
            $(item).css("background-color, #c93");
        }
    });
});