JQuery에서 앵커를 사용하는 현재 페이지 및 다른 페이지에서 특정 (숨겨진) 탭에 연결 하시겠습니까?

Question

이 사이트에서 여러 답변을 검토했지만 어떤 이유로 든 문제를 해결할 수 없었습니다 (how to select a particular tab from other page using anchor tag in JQuery..?). 로컬 컴퓨터에서만 테스트 중이므로 영향을 줄지 확신 할 수 없습니다.

다른 페이지뿐만 아니라 현재 페이지의 각 탭에 연결하고 싶습니다. 지금은 각 탭을 클릭 할 수 있으며 완벽하게 작동하며 사이트 URL이 변경됩니다 (# tab1, # tab2 등).

그러나 예를 들어 탭 2가 표시되어있는 동안 탭 1 링크 (실제 탭이 아니라 페이지의 링크가 하나)를 클릭하면 아무 것도 나타나지 않지만 URL은/site로 변경됩니다 .html # tab1. 그러나 탭 1이 표시되어있는 동안 탭 1 링크를 클릭하면 탭 1로 이동합니다. 탭이 숨겨져 있기 때문에 문제가 발생합니다. 링크는 현재 보이는 탭에서만 작동합니다. 적어도 페이지 내에서 작동하도록 만들 수 있다면 페이지 외부의 링크에서도 작동하도록 할 수 있습니다.

기본적으로 누군가에게 /site.html#tab3에 대한 링크를 보내고 해당 탭으로 이동하게하고 싶습니다.

내 코드 :

$(document).ready(function() { 

     //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return; 
    }); 
}); 

그리고 :

$(document).ready(function() { 

    var tabId = window.location.hash; // will look something like "#h-02" 
    $(tabId).click(); // after you've bound your click listener 
}); 

그리고 탭 :

<ul class="tabs"> 
     <li><a href="#tab1">Ex 1</a></li> 
     <li><a href="#tab2">Ex 2</a></li> 
     <li><a href="#tab3">Ex 3</a></li> 
     <li><a href="#tab4">Ex 4</a></li> 

그리고 예를 들어 탭의 컨텐츠 & 탭에 페이지의 링크 :

//tab content 
<div class="tab_container"> 
     <div id="tab1" class="tab_content"> 
      <h2>Ex 1</h2> 

//Link to Tab 1 from right menu 
<ul><li> 
<a href="#tab1">Click here to go to tab 1</a></li></ul> 

고맙습니다!

Answer 1

이 참조 :

이 작업을 수행 할 때 페이지로드 (DOM이 준비) 해시에 대한

var tabId = location.hash; // will look something like "#h-02" 

확인

if(tabId){ 
    $(tabId).show(); // this will fired only when url get hash 
    $(tabId).siblings().hide(); // this will show only targeted tab 
           // others get hidden 
} 

당신이 가치를 가질 것이다이 site.html#tab1

variable tabId 같은 URL을 얻을 때이 무엇을 할 것 인 코드 블록이 대상 탭을

Answer 2

탭 링크에 공통 클래스를 추가하십시오. 링크를 클릭하면 해당 탭에서 클릭을 트리거 할 수 있습니다.

HTML

<a href="#tab1" class="tab-link">Click here to go to tab 1</a> 

JS는

$('.tab-link').click(function(){ 
    $('ul.tabs li a[href="'+this.href+'"]').parent().click(); 

});