이러한 Jquery 탭을 ahref를 통해 링크 가능하게 만드는 방법은 무엇입니까?

Question

저는 하루 종일 문제를 해결하려고 노력하고 있습니다. 따라서 제한된 모든 기능을 모두 소모 한 후에 여기에 왔습니다. 나는 어떤 프로그래머도 아니지만 나는 시도했다. ..

나는 WordPress를 실행 중이며 사용자 정의 탭이있는 테마를 사용하고있다.

ahref 코드를 사용하여 탭에 연결할 수 있기를 원합니다. 예 : www.test.com/page/#tab2에서 두 번째 탭을 엽니 다.

<div class="short-tabs"> 
<ul style="border-bottom: 1px solid #dbd6d6;"> 
<li><a href="">Best Food Processors</a></li> 
<li><a href="">Buying Guide</a></li> 
</ul> 
<div style="border: none;"> 
this is tab1 
</div> 
<div style="border: none;"> 
this is tab2 
</div> 
</div> 

가 여기에 해당하는 jQuery 코드입니다 : 여기

는 HTML 코드의

// Tabbed blocks 
    jQuery(".short-tabs").each(function() { 
     var thisel = jQuery(this); 
     thisel.children("div").eq(0).addClass("active"); 
     thisel.children("ul").children("li").eq(0).addClass("active"); 
    }); 

    jQuery(".short-tabs > ul > li a").click(function() { 
     var thisel = jQuery(this).parent(); 
     thisel.siblings(".active").removeClass("active"); 
     thisel.addClass("active"); 
     thisel.parent().siblings("div.active").removeClass("active"); 
     thisel.parent().siblings("div").eq(thisel.index()).addClass("active"); 
     return false; 
    }); 

나는 방법에 연결을 허용하려면이 옵션을 편집 할 생각이없고, 탭에서. HTML에서 볼 수 있듯이 # tab1에 링크 할 필요가 없습니다. 예를 들어 작업 할 수 있습니다.

도움이 될만한 아이디어 나 전문가가 있습니까? :)

JSFIDDLE 링크 : http://jsfiddle.net/cws1j0q7/2/

Answer 1

당신은 당신의 코드에이를 통합하는 예를 들어 window.location.hash

가장 쉬운 방법을 사용하여 URL 해시를 확인할 수 있습니다하면 링크에 HREF을 추가하는 것입니다

<ul style="border-bottom: 1px solid #dbd6d6;"> 
    <li> 
     <a href="#tab1">Best Food Processors</a> 
    </li> 
    <li> 
     <a href="#tab2">Buying Guide</a> 
    </li> 
</ul> 

URL에 해시가 있고 클릭이 트리거되는지 확인하십시오.

if(window.location.hash){ 
    $('a[href=' + window.location.hash + ']').trigger('click'); 
} 

data- * 속성 또는 ID를 설정하여이를 확인할 수도 있습니다. ID를 설정하도록 선택한 경우 자동 스크롤을 사용 중지해야합니다.

Answer 2

의 핵심은 여기 window.location.hash

jQuery(".short-tabs").each(function() { 
    var thisel = jQuery(this); 
    thisel.children("div").eq(0).addClass("active"); 
    thisel.children("ul").children("li").eq(0).addClass("active"); 
}); 

jQuery(".short-tabs > ul > li a").click(function() { 
    selectTab(this); 
    return false; 
}); 

jQuery("a").click(function() { 
    processHash('#' + jQuery(this).prop('href').split("#")[1]); 
}); 

function selectTab($a) { 
    var $li = jQuery($a).parent(); 
    $li.siblings(".active").removeClass("active"); 
    $li.addClass("active"); 
    $li.parent().siblings("div.active").removeClass("active"); 
    $li.parent().siblings("div").eq($li.index()).addClass("active"); 
} 

function processHash(hash) { 
    var $a = jQuery('.short-tabs a[href="' + hash + '"]'); 
    selectTab($a); 
} 

if (window.location.hash) { 
    processHash(); 
} 

http://jsfiddle.net/cws1j0q7/7/