html - 导航栏 - 如何在选中时保持页面突出显示？

Question

我有一个导航栏，当您悬停它时它会改变颜色(向用户显示将要选择的内容)。但是，如果用户单击它，我希望该栏保持“突出显示”颜色，以便他们可以看到他们在哪个页面上(然后如果他们单击新页面，它将突出显示该页面 - 基本上我如何保持最后一页突出显示？ 如果您查看此网站，这就是我希望它的工作方式 http://www.microsoft.com/web/

理想情况下，我想通过 CSS 来完成此操作。

这是 HTML:

<div id='cssmenu'>
<ul>
    <li><a href='#'><span>Home</span></a>
    </li>
    <li><a href='#'><span>Hosting</span></a>
    </li>
    <li><a href='#'><span>Domain Names</span></a>
    </li>
    <li><a href='#'><span>Servers</span></a>
    </li>
    <li><a href='#'><span>About Us</span></a>
    </li>
    <li class='last'><a href='#'><span>Support</span></a>
    </li>
</ul>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);
#cssmenu {
background: #000000;
width: auto;
position: relative;
top: 0;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
line-height: 1;
display: block;
zoom: 1;
}
#cssmenu ul:after {
content:' ';
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
float: left;
display: block;
padding: 0;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 15px;
font-family:'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #83c9ff;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content:'';
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content:'';
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #83c9ff;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after, #cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #83c9ff;
}
#cssmenu ul li.active a:before {
width: 100%;
}
@media screen and (max-width: 768px) {
#cssmenu ul li {
    float: none;
}
#cssmenu ul li a {
    width: 100%;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#cssmenu ul li a:after {
    display: none;
}
#cssmenu ul li a:before {
    height: 1px;
    background: #ffffff;
    width: 100%;
    opacity: .2;
}
#cssmenu ul li.last > a:before, #cssmenu ul li:last-child > a:before {
    display: none;
}
}

这是演示:http://jsfiddle.net/B9CPg/3/

Answer 1

我的建议是使用简单的 jQuery。 我已经看到您添加了 .active 样式 只需添加

$("#cssmenu > ul > li").click(function(){
    $("#cssmenu > ul > li").removeClass("active");
    $(this).addClass('active');
});

对于你的 document.ready 事件，这个函数的作用是，每次点击 #cssmenu 中的 li 时，它会从 .active 类中清除所有 li，然后将 .active 添加到你请求的 .li 中

这是一个演示:http://jsfiddle.net/B9CPg/23/

否则，如果它不是同一个链接菜单，只需为您的每个页面添加 .active