동적으로 CSS 클래스 변경

Question

class="active"을 동적으로 변경하고 싶습니다. otherlink.aspx의 링크를 클릭하면 활성 링크가됩니다. default.aspx 링크를 클릭하면 class = "active"이됩니다.

<ul> 
    <li class="active"><a href="default.aspx">Home</a> 
     <ul> 
      <li><a href="link1.aspx">Founder</a></li> 
      <li><a href="link2.aspx">Principal</a></li> 
      <li><a href="link3.aspx">Sub-Principal</a></li> 
      <li class="last"></li> 
     </ul> 
    </li> 
    <li><a href="otherlink.aspx">Departments</a> 
     <ul> 
      <li><a href="otherlink1.aspx">Departments</a></li> 
      <li><a href="otherlink2.aspx">Courses</a></li> 
      <li class="last"></li> 
     </ul> 
    </li> 
</ul> 

내가 어떻게해야합니까?

Answer 1

링크가 페이지 새로 고침을 유발하지 않는다고 가정합니다. 수 각 링크에 클래스를 추가하는 경우 간단한 방법은 탐색 - 링크

<li class="active nav-links"><a href="default.aspx">Home</a> 

다음 JQuery와 사용

$('.nav-links').on('click', function(){ 

//remove active class from old link 

    $('.nav-links').removeClass('active'); 

//add active class to current link 

    $(this).addClass('active'); 

} 

Answer 2

주고 IDS 당신의 리튬 태그를 호출 할 수 있습니다

<ul> 
         <li class="active" id="default"><a href="default.aspx">Home</a> 
          <ul> 
           <li><a href="link1.aspx">Founder</a></li> 
           <li><a href="link2.aspx">Principal</a></li> 
           <li><a href="link3.aspx">Sub-Principal</a></li> 
           <li class="last"></li> 
          </ul> 
         </li> 
         <li id = "otherlink1"><a href="otherlink.aspx" >Departments</a> 
          <ul> 
           <li><a href="otherlink1.aspx">Departments</a></li> 
           <li><a href="otherlink2.aspx">Courses</a></li> 
           <li class="last"></li> 
          </ul> 
         </li> 
</ul> 

로드 중 otherlink1.aspx에서이 줄을 추가하십시오.

$("li").find(".active").removeClass("active"); 
$("#otherlink1").addClass("active"); 

다른 ASP 페이지에서도 각각

입니다.

그것은 3 단계 (의사 코드)에서 얻을 수있다

Answer 3

: a.parent() 현재 모든 a 태그를 통해 루프

1. 1. 경우 현재 a.href 일치 window.location.pathname
      1. addClass('active')을합니다 (학부모 li)

   여기 코드에 10

은 (내가 쉽게 jQuery를에 일치 할 수 있도록 목록에 ID를 추가했습니다.

HTML :

<ul id="menu"> 
    <li class="active"><a href="default.aspx">Home</a> 
     <ul> 
      <li><a href="link1.aspx">Founder</a></li> 
      <li><a href="link2.aspx">Principal</a></li> 
      <li><a href="link3.aspx">Sub-Principal</a></li> 
      <li class="last"></li> 
     </ul> 
    </li> 
    <li><a href="otherlink.aspx">Departments</a> 
     <ul> 
      <li><a href="otherlink1.aspx">Departments</a></li> 
      <li><a href="otherlink2.aspx">Courses</a></li> 
      <li class="last"></li> 
     </ul> 
    </li> 
</ul> 

jQuery를 :

var current = window.location.pathname; 
$('#menu a').each(function(){ 
    if($(this).attr('href') == current){ 
     $(this).parent().addClass('active'); 
    } 
}); 

은 (어쩌면 당신은 window.location.pathname에/첫 번째 제거 할 필요)