클릭 후 활성 링크

Question

탐색 모음의 "a"요소에 클래스를 추가하는 방법을 찾을 수 없습니다.

이

는 HTML의 탐색과 jQuery를 (test.html를 URL에 적용 단지, 그것을 테스트하는)입니다 :

$(document).ready(function() { 
 
    $("a").click(function() { 
 
    var actRef = $(this).attr("href"); 
 
    if (actRef === "test.html") { 
 
     $("a[href='test.html']").addClass("active"); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<nav> 
 
    <ul> 
 
    <li><a href="index.html">Inicio</a> 
 
    </li> 
 
    <li><a href="test.html">Test</a> 
 
    </li> 
 
    <li><a href="#">Item</a> 
 
    </li> 
 
    <li><a href="test2.html"> test2</a> 
 
    </li> 
 
    </ul> 
 
</nav>

이 밤은 가공은, 그냥 아무것도 할 나던하지만, .click을 .html로 변경하면 클래스를 추가해도 제대로 작동하지만 페이지의 정보가 변경되지 않도록 링크로 이동하지 않습니다. How to change active class while click to another link in bootstrap use jquery?하지만 때문에 e.preventDefault(); ...

전에서 preventDefault이 늘 클래스를 추가하지만 링크에 전달합니다 꺼내 경우

...

PD의 어느 작품 :
나는이를 시도한 목표는 사용자가 그가 클릭 한 메뉴 링크에 따라 실제로 어떤 탭에 있는지 알려주는 것입니다.

Answer 1

감사를로드합니다

$(document).ready(function(){ 
    highlightlink('index.html') 
}); 
}); 

이를 @Panther하기

$(document).ready(function(){ 
var location = window.location.pathname; 
location = location.replace("/", ""); 
$("a[href='"+location+"']").addClass("active"); 
}); 

Answer 2

그래서 당신이 할 수있는 일은 당신이 좋아하는 URL의 쿼리 문자열에 페이지 링크를 추가 할 수 있습니다 :

www.example.com/test.html?pageinfo=test.html 

이제 쿼리 문자열에서 페이지 정보를 검색 할 수 있습니다 그리고 당신은 추가 할 수 있습니다 성공적인 페이지를로드 한 후 활성 앵커 태그에 대한 클래스입니다.

이 방법을 사용하면 pageinfo=test.html처럼 쿼리 스트링을 얻을 수 있으며 성공적으로 쿼리 스트링을 구문 분석하면 정보가 {pageinfo:test.html}으로 변환됩니다.

이것을 사용하여 스타일/클래스를 앵커 태그에 추가 할 수 있습니다.

Answer 3

정말 html 요소에 클래스를 추가해야합니까? 스타일링에 관한 것이라면 단순한 :active 의사 선택기를 사용하여 스타일링을 해결할 수 있다고 생각합니다. 아래의 예를 참조하십시오 : 사용하지 왜

li:active { 
 
    background-color: #f99; 
 
} 
 

 
li a:active { 
 
    color: #fff; 
 
}

<nav> 
 
    <ul> 
 
    <li><a href="index.html">Inicio</a> 
 
    </li> 
 
    <li><a href="test.html">Test</a> 
 
    </li> 
 
    <li><a href="#">Item</a> 
 
    </li> 
 
    <li><a href="test2.html"> test2</a> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 4

을 다음 anchors:active 상태 :

a:active { 
    /* your .active styles */ 
} 

Answer 5

당신의 코드가 자바 스크립트를 사용하여 일부 링크에 클래스를 설정하려고하는대로 작동하지 않는, 같은 시간을 탐색합니다. 따라서 링크가 실제로 작동하는 클래스를 변경하는 부분이 있지만 탐색 HTML을 다시로드 한 후에 볼 수는 없습니다.

이 문제를 해결하려면 공통 HTML에서 링크 클래스를 업데이트하기위한 공통 기능을 작성해야합니다. 그러나 click에서 호출하는 대신 onload 이벤트에서로드되는 html의 함수를 호출하십시오.

귀하의 일반적인 JS 또는 HTML이 기능을 갖는 것 : -

highlightlink(linkid){ 
    $("a[href=' + linkid +']").addClass("active"); 
} 

각 HTML은 각각 htmlname이 functin의 온로드를 호출합니다. 예를 들어 테스트.HTML 것이다 모자이 코드 : -

$(document).ready(function(){ 
    highlightlink('test.html') 
}); 
}); 

index.html을 가지고되지만 - 당신의 HTML이로드되면, 해당 HTML이