Как изменить цвет списка в зависимости от состояния ссылки внутри?

Question

Q:

У меня есть следующее меню:

Я хочу изменить цвет элемента списка, если ссылка в active состоянии. Как это сделать?

my.aspx:

        <div style="height: 50px">
            <ul id="topnav" style="text-align: center">
                <li><a href="MasterData.aspx">1111</a></li>
                <li><a href="ScheduleForm.aspx">2222 </a></li>
                <li><a href="MapingData.aspx">3333</a> </li>
                <li><a href="EditSchedule.aspx">4444</a> </li>
                <li><a href="LoginPage.aspx">5555</a></li>
            </ul>
        </div>

.css:

ul#topnav
{
    margin: 0px;
    padding: 2px 0px;
    clear: both;
    width: 980px;
    list-style: none;
    position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
    font-size: 1.2em;
    background-color: #CC6A11;
    height: 50px;
}
ul#topnav li
{
    float: right;
    margin: 0px auto; /* margin-right:0;*/
    padding: 5px 27px;
    border-right: 1px solid #555; /*--Divider for each parent level links--*/
    background-color: #CC6A11; /*url(topnav_stretch.gif) repeat-x;*/
    text-align:center;
}
ul#topnav li a
{
    padding: 10px 5px;
    display: block;
    color: #f0f0f0;
    text-decoration: none;
    width:121px;
    text-align:center;
}
ul#topnav li:hover
{
    background-color: #1376c9;
}

ul#topnav li a:active
{
    background-color: Purple;
}

ul#topnav li span
{
    text-align:right;
    float: right;
    padding: 5px 2px;
    position: absolute;
    margin-right: 0;
    left: 0;
    top: 52px;
    display: none; /*--Hide by default--*/
    width: 977px;
    z-index: 10;
    background-color: #1376c9;
    color: #fff; /*--Bottom right rounded corner--*/
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px; /*--Bottom left rounded corner--*/
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
ul#topnav li:hover span
{

}
/*--Show subnav on hover--*/
ul#topnav li span a
{
    display: inline;
}
/*--Since we declared a link style on the parent list link, we will correct it back to its original state--*/
ul#topnav li span a:hover
{
    text-decoration: underline;
}

.js:

$(document).ready(function() {

    $("ul#topnav li").hover(function() { //Hover over event on list item
        $(this).css({ 'background': '#1376c9  repeat-x' }); //Add background color and image on hovered list item
        $(this).find("span").show(); //Show the subnav
    }, function() { //on hover out...
        $(this).css({ 'background': '#CC6A11' }); //Ditch the background
        $(this).find("span").hide(); //Hide the subnav
    });

});

Answer 1

Если вам нужно что-то действительно простое, следующее будет делать

См. Мою скрипку - Чтобы заставить скрипку делать то, что вы хотите, нужно нажать «запустить». В результате браузер перейдет к «/ _display /», а затем вы увидите выделенную ссылку «показать».

<style>
    .highlight
    {
       background-color:yellow;
    }
</style>

<script>
    $(function(){
    var path = window.location.pathname;
     console.log(path);
    $("a[href='" + path +"']" ).addClass("highlight");
    });
</script>

<ul id="navmenu">
    <li><a href="guy.asp">me</a></li>
    <li><a href="/_display/">display</a></li>
</ul>

Если ссылки содержат параметры и вам понадобится цикл. дайте мне знать, и я опубликую здесь код.

Answer 2

Вам нужно как-то «пометить» тег привязки, чтобы он был активным, обычно с идентификатором:

<div style="height: 50px">
            <ul id="topnav" style="text-align: center">
                <li><a href="MasterData.aspx" id="active">1111</a></li>
                <li><a href="ScheduleForm.aspx">2222 </a></li>
                <li><a href="MapingData.aspx">3333</a> </li>
                <li><a href="EditSchedule.aspx">4444</a> </li>
                <li><a href="LoginPage.aspx">5555</a></li>
            </ul>
        </div>

Таким образом, легко создать CSS, который будет отличаться от активной ссылки.Вам нужно будет установить этот идентификатор в коде (если у вас нет отдельных файлов для каждой страницы)

Также посмотрите на http://hicksdesign.co.uk/journal/highlighting-current-page-with-css, так как есть хороший альтернативный способ сделать это там.