css - 悬停颜色不会在页面加载时持续存在

Question

我一直无法编写 CSS 来让左侧导航在用户选择的页面加载后保持悬停状态。这是网站:

http://dev.triptocollege.org/educator/Things-I-Should-Be-Doing-Now.aspx

这是二级导航的 CSS:

/************ 二级垂直导航******* ********/

.second-level-menu-vertical {
    float: left;
    font-family: 'vERDANA',sans-serif;
    font-size: 110%;
    font-weight: bold;
    margin-left: -10px;
    margin-top: 57px;
    text-transform: lowercase;
    width: 155px;
    z-index: 200;
    position:absolute;
}

.second-level-menu-vertical ul {
    padding-bottom: 10px;
}
.second-level-menu-vertical li {
    background: none repeat scroll 0 0 transparent;
    margin: 0;
    padding: 0 0.75em;
}
.second-level-menu-vertical li a {
    border-bottom: 1.75px dashed #C9C9C9;
    color: #666;
    display: block;
    padding: 1em 0;
    text-decoration: none;
}
.second-level-menu-vertical li a:hover {
    background-color: #FDCC00;
    border-radius: 7px 7px 7px 7px;
    color: #000;
    text-decoration: none;
}
.second-level-menu-vertical li.selected {
    background-color: #FDCC00;
    border-radius: 7px 7px 7px 7px;
    color: #000;
    text-decoration: underline;
}

感谢帮助

Answer 1

您需要做一些事情来将“当前”类添加到与您加载的页面相对应的列表项中，然后您可以使用您拥有的 CSS 做这样的事情:

.second-level-menu-vertical li a:hover, .second-level-menu-vertical li.current a {
    background-color: #FDCC00;
    border-radius: 7px;
    color: #000;
    text-decoration: none;
}

您可以使用 Javascript(在客户端)或在您的菜单生成 ASP.NET 代码(通过代码隐藏)中添加该类...我无法建议您哪个更适合您，因为你只包含了 CSS。

已编辑

鉴于此标记:

<div class="second-level-menu-vertical">
    <ul class="top-level">
        <li><a href="K-5th-Grades.aspx">K-5th Grades</a></li>
        <li><a href="6th-grade.aspx">6th Grade</a></li>
        <li><a href="7th-grade.aspx">7th Grade</a></li>
        <li><a href="8th-grade.aspx">8th Grade</a></li>
        <li><a href="9th-grade.aspx" class="selected">9th Grade</a></li>
        <li><a href="10th-grade.aspx">10 Grade</a></li>
        <li><a href="11th-grade.aspx">11th Grade</a></li>
        <li><a href="12th-grade.aspx">12th Grade</a></li>
        <li><a href="college-checklist.aspx">College Checklist</a></li>
        <li><a href="savings-growth-calculator.aspx">Savings Growth Calculator</a></li>
    </ul>
</div>

(请注意，我在其中放了一个选定的类来说明......如果您采用 jQuery 或 Javascript 方法，那么它不应该在您的标记生成器中。如果您可以将它放入您的标记生成器中，那么这消除了对 Javascript 方法的需要!)

这是修改后的 CSS:

.second-level-menu-vertical {
    float: left;
    font:bold 110% 'verdana', sans-serif;
    margin-left: -10px;
    margin-top: 57px;
    text-transform: lowercase;
    width: 155px;
    z-index: 200;
    position: absolute;
}
.second-level-menu-vertical ul {
    padding-bottom: 10px;
}
.second-level-menu-vertical li {
    background: none;
    margin: 0;
    padding: 0 0.75em;
}

/* Don't forget LoVe-HAte to set the default styles for non-hover states */
.second-level-menu-vertical li a,
.second-level-menu-vertical li a:link,
.second-level-menu-vertical li a:visited,
.second-level-menu-vertical li a:hover,
.second-level-menu-vertical li a:active {
    border-bottom: 1.75px dashed #C9C9C9;
    color: #666;
    display: block;
    padding: 1em 0;
    text-decoration: none;
}

.second-level-menu-vertical li a:hover,
.second-level-menu-vertical li a.selected,
.second-level-menu-vertical li a.selected:link,
.second-level-menu-vertical li a.selected:visited,
.second-level-menu-vertical li a.selected:hover,
.second-level-menu-vertical li a.selected:active {
    background-color: #FDCC00;
    border-radius: 7px;
    color: #000;
    text-decoration: underline;
}

这里是您需要的非常简单的 jQuery 才能工作。它根据您当前在网站上使用的 URL 做出一些假设，其中之一是您在任何这些 URL 中都没有查询字符串，并且您将始终以与给定匹配的页面名称结尾href 在你的菜单中。

// you want the path of the location, 
// as that should not include the querystring, 
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// This selector finds the a tag that 
// has an href matching your currentPage
// variable. It then adds a selected class
// to that a tag
var menuItems = $(".second-level-menu-vertical li a[href~='" + currentPage + "']").addClass("selected");

请注意，使用常规 javascript 来获取它有点复杂。上面的示例可以在 jsFiddle ( http://jsfiddle.net/mori57/dDsjf/ ) 上看到，但显然它在那里不起作用(虽然可能更容易阅读)，因为它无法正确链接到您的站点。

非 jQuery Javascript 方法(http://jsfiddle.net/mori57/rQXBV/2/):

// you want the path of the location, 
// as that should not include the querystring, 
// if you have one
var pathGroup = location.pathname.split("/");
// split it by the / character
// then get the last element... this should be your
// current page name
var currentPage = pathGroup[pathGroup.length - 1];
// get the top level element, and get the first
// element returned, as getElementsByClassName 
// returns an array
var sideMenu = document.getElementsByClassName("second-level-menu-vertical")[0];
// get all the li items from that item
var sideLinks = sideMenu.getElementsByTagName("li");
// loop through the list returned
for(var link in sideLinks){
    // make sure that you're dealing with an object
    if(typeof sideLinks[link] == "object"){
        // get the <a/> tag from inside the li
        var aTag = sideLinks[link].getElementsByTagName("a")[0];
        // get the <a/> tag's href
        var href = aTag.getAttribute("href");

        if(href == currentPage){
            // if the href matches your currentPage
            // value, set the class to 'selected'
            aTag.setAttribute("class","selected");
        }
    }
}