링크 상태에 따라 listitem의 색상을 변경하는 방법은 무엇입니까?

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

당신은 앵커 태그는 일반적으로 활성화 될 어떻게 든 '태그'필요 id :

<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를 쉽게 만들 수 있습니다. 코드별로 ID를 설정해야합니다 (각 페이지에 대해 별도의 파일이 없으면 제외).

http://hicksdesign.co.uk/journal/highlighting-current-page-with-css을보세요. 거기에 좋은 대체 방법이 있습니다. 정말 간단한 일을해야하는 경우

Answer 2

, 다음

See my fiddle을 할 것입니다 - 당신은 당신이 "실행"을 클릭해야 원하는 일을하기 위해 바이올린을 얻기 위하여. 브라우저가 "/ _display /"로 이동하면 "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> 

링크에 매개 변수가 포함되어 있으므로 루프가 필요합니다. 알려 주시면 코드를 게시 할 예정입니다.