Jquery - url을 통해 탭을 선택하십시오.

다음과 같이 jquery 코드를 사용하여 탭을 사용하고, content/div 사이에서 뒤로 및 네 번째 탭을 만들 수 있습니다. 내 질문에 아래의 코드를 사용하여 어떻게 초기 탭을 URL에 변수를 기반으로로드 할 수 있습니까? 나는 기본 TAB2 부하에 의해 다음 대신 TAB1 로딩의, somesite.com/page.php#tab2로 이동한다면 :Jquery - url을 통해 탭을 선택하십시오.

그냥이 코드를 주목해야 할

$('.tabcontent > div').hide(); 
$('.tabcontent > div:first-child').show(); 
$('.tabs > li:first-child').addClass('selected'); 
$('.tabs > li a').click(function() { 
    var tab_id = $(this).attr('href'); 
    $(tab_id).parent().children().hide(); 
    $(tab_id).fadeIn(); 
    $(this).parent().parent().children().removeClass('selected'); 
    $(this).parent().addClass('selected'); 
    return false; 
});

EDIT 클릭 이벤트 그러나,이다 탭을 클릭하지 않는 한 URL을 통해 탭을 변경하려고하면 사람이로드됩니다. 그러면 클릭 한 번을 듣고 현재 URL에 값이 있는지 확인하려면 어떻게해야합니까?

출처

2011-10-08 John

당신은 GUP 기능을 사용할 수 있습니다, here을 발견

function gup(name) 
{ 
    name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]"); 
    var regexS = "[\\?&]"+name+"=([^&#]*)"; 
    var regex = new RegExp(regexS); 
    var results = regex.exec(window.location.href); 
    if(results == null) 
    return ""; 
    else 
    return results[1]; 
}

이 당신이 URL 매개 변수를 읽고 선택한 탭으로 이동하는 데 사용할 수 있습니다.

출처

2011-10-08 17:34:45 kgiannakakis

는 희망이 도움이 될 것입니다 : - 여기

var tab_id = $(this).attr('href'); 
var split = tab_id.split('#'); 
    split = split[1]; 

if (split = "page 2") { 

window.alert(split); 

} else { 
// Default condition 

}

JS 바이올린 예 - URL을 조각 (#whatever)에 변화를 감지 http://jsfiddle.net/aNMBW/

출처

2011-10-08 17:37:38 KryptoniteDove

가 약간의 도움없이 crossbrowser을하기 어렵다.

... 
if(window.location.hash){ 
    $(".tabs > li a[href=" + window.location.hash + "]").click(); 
}

: 해시를 감지하여

내가 오해하고 있는데 당신은 단지 초기 URL을 기반으로 탭을로드하려면

http://benalman.com/code/projects/jquery-bbq/examples/fragment-jquery-ui-tabs/

, 당신이 그것을 할 단지 수 : 나는 보통 벤 독일어의 BBQ 플러그인을 사용

이 당신의 탭 = "# foo는"을 HREF에 연결되어 있다고 가정하고, 사용자가 방문하는 URL 당신은 window.location.hash를 사용하여 URL의 해시 값을 얻을 수 있습니다 mysite.com/pagename#foo

출처

2011-10-08 18:39:46

입니다. 거기에서 어떤 탭을 표시할지 결정하기 위해 약간의 점검 만하면됩니다.

Here's a live example. iFrames를 사용하기 때문에 jsFiddle에서 실제로 window.location.hash을 사용할 수 없습니다. 이는 브라우저의 주소 표시 줄에 표시되는 주소가 코드 자체에서 가져올 값이 아님을 의미합니다. 따라서 hash 변수의 값을 코드에 직접 설정하여 간단히 해결할 수 있습니다. 어쨌든

가, 가정이 당신의 HTML입니다 :

<div>One</div> 
<div>Two</div> 
<div>Three</div>

그런 다음 자바 스크립트는 다음과 같습니다

$(function(){ 

    hash = window.location.hash 

    index = parseInt(hash.replace('tab','')) - 1; 

    if(isNaN(index)){ //if the hash isn't a valid tab 
     index = 0; 
    } 

    $('div').eq(index).show(); 
});

당신은 아마도 먼저 확인해야 확실 $('div').eq(index)을 실제로 처음을 보여주는 의지, 존재 탭이 없다면 (해시 분석이 합법적 인 값을 산출하지 못하는 것처럼).

출처

2011-10-08 18:45:27 maxedison

Jquery - url을 통해 탭을 선택하십시오.

답변

관련 문제