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。

EDITED

鉴于此标记：

<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，你需要它来工作。根据您当前在您的网站上使用的网址做出一些假设，其中一个是您在这些网址中没有查询字符串，并且您将始终以与给定网址匹配的网页名称结束菜单中的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");
        }
    }
}

页面加载时悬停颜色不会持久存在

1 个答案: