2012-07-12 2 views
0

Jquery를 사용하여 특정 href 링크가 포함 된 목록의 개별 구성원을 선택합니다. 여기 Jquery에 목록이 포함되어 있습니다.

내 코드는 지금까지입니다 : 나는이 작업을 얻이 수없는 것

<ul id="navigation"> 
    <li><a href="/index" title="Home">Home</a></li> 
    <li><a href="/features" title="Features">Features</a></li> 
    <li><a href="/people" title="People">People</a></li> 
    <li><a href="/accounts" title="account">accounts</a></li> 
    <li><a href="/blog" title="Blog">Blog</a></li> 
    <li><a href="/faq" title="FAQ">FAQ</a></li> 
</ul> 

:

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
    var page = jQuery(location).attr('href'); 
    if(page $= "home"){ 
     $("'li':contains('index')").addClass("active")}; 
    if(page $= "features"){ 
     $("'li':contains('features')").addClass("active")}; 
    if(page $= "people"){ 
     $("'li':contains('people')").addClass("active") }; 
    if(page $= "accounts"){ 
     $("'li':contains('accounts')").addClass("active")}; 
    if(page $= "blog"){ 
     $("'li':contains('blog')").addClass("active")}; 
    if(page $= "faq"){ 
     $("'li':contains('faq')").addClass("active")};      
}); 
</script> 

HTML 코드는 다음과 같습니다? 포함 기능을 올바르게 사용하고 있습니까?

답변

2

:contains는 소자의 innerText를 검색한다. 당신은 innerHTML를 스캔 :has, 싶다.

또한 href 속성의 경우 attribute selector : [href="index"]을 사용해야합니다.

$("li:has(a[href*='index'])") 

"index"을 포함하는 HREF과 <a> 태그를 포함 <li>을 선택합니다.

UPDATE :

if(page $= "home") 

당신은 실제로 그렇게 할 수 없습니다. 문자열이 다른 문자열로 끝나는 지 보려면 정규식 (또는 하위 문자열)을 사용하십시오.

jQuery(location).attr('href'); 

왜이 용도로 jQuery를 사용합니까? 그냥 location.href하십시오. 더 나은 방법은 location.pathname입니다. 그런 다음 if 블록을 잃을 수 있고, 간단하게 할이 :

var page = location.pathname; 
$("li:has(a[href*='"+page+"'])").addClass("active"); 

(당신은 page.replace('home', 'index')을 수행해야 할 수 있습니다)

+0

내가 한이 .. 내가 디버깅 수 있었다 페이지 변수가 올바른 저장됩니다 경로, 그러나 나는 대답이 .... 쿼리에서 당신은 어떤 함수를 호출 할 필요가 없어? –

+0

@ChristopherH :'을 console.log (location.pathname) 무엇을'라고? "어떤 기능도 호출 할 필요가 없다"는 것은 무엇을 의미합니까? –

+1

나는 그것을 가지고 ... location.pathname 내 href가 가지고 있지 않은 최종 슬래시가 있습니다. 감사. –

관련 문제