2010-08-22 4 views
2

jQuery 탭을 가지고 놀고 있고 프로토 타입을 만들고 실행하고 있습니다. 앵커 태그 (... # 조각-1 등) : 나는 탭의 이름을 추출하려고jQuery와 분할이 함께 작동하지 않습니까?

$(document).ready(function() { 
    $("#tabs").tabs(); 

    // Select the second tab 
    // $("#tabs").tabs({ selected: 1 }); 

    // http://viralpatel.net/blogs/2009/04/jquery-tabs-create-html-tabs-using-jquery-ui.html 
    $('#tabs').bind('tabsselect', function(event, ui) { 

    // Objects available in the function context: 
    // alert(ui.tab);  // anchor element of the selected (clicked) tab 
    var tabPageName = ui.tab; 
    alert('Tab Name: ' + tabPageName); 

    // var results = tabPageName.substring(tabPageName.IndexOf("#") + 1); 
    // alert('Page Name: ' + results); 

    var arrData = tabPageName.split("#"); 
    alert(arrData[1]); 

    // alert(ui.panel); // element, that contains the selected/clicked tab contents 
    alert(ui.index); // zero-based index of the selected (clicked) tab 

    }); 
}); 

:

http://www.omnicom-innovations.com/play/tabsdemo.html

여기 내 코드입니다. split 메서드 (및 IndexOf 메서드를 대신 사용)를 사용하려고합니다. 당신이 볼 수 있듯이

<div id="tabs"> 
    <ul> 
    <li><a href="#fragment-1"><span>One</span></a></li> 
    <li><a href="#fragment-2"><span>Two</span></a></li> 
    <li><a href="#fragment-3"><span>Three</span></a></li> 
    </ul> 
    <div id="fragment-1"> 
    <p>First tab is active by default:</p> 
    <pre><code>$('#example').tabs();</code></pre> 
    </div> 
    <div id="fragment-2"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
    <div id="fragment-3"> 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 
    </div> 
</div> 

, 나는 다음과 같은 오류 메시지가 표시됨 때문에 분할() 메소드를 주석했다 :

catch되지 않은 형식 오류 : 개체 http://www.omnicom-innovations.com/play/tabsdemo.html#fragment-3는 '분할'있는 방법이 없습니다

하지만 split 메서드는 JavaScript에서 작동한다는 것을 알고 있습니다. 아무도 내가 누락 될 수있는 것을 본 적이 있습니까? alert를 사용하는 경우

// DON'T USE THIS - this is a quick & dirty solution, see below for real solution 
// choose one - the one you really need 
var arrData = tabPageName.toString().split("#") 
var results = tabPageName.toString().substring(tabPageName.IndexOf("#") + 1); 

변환이 자동으로 발생하지만 split 페이지 이름에 시도하지 않을 때 :

답변

5

당신은 명시 적으로 문자열로 페이지 이름을 변환해야합니다. 이 부분을 작성하는 가장 좋은 방법은 다음과 같습니다

var tabPageName = ui.tab.toString(); 
// choose one - the one you really need 
var arrData = tabPageName.split("#") 
var results = tabPageName.substring(tabPageName.IndexOf("#") + 1); 

이 당신이 당신의 tabPageName 변수에 저장하는 것은 실제로 페이지 이름이 아니기 때문에 - 그것은 그 이름 alert 에드을 반환 탭 자체입니다.

+0

당신이 말하는 것은 말이 맞습니다. JavaScript를 강력한 형식의 언어로 생각한 적은 없었습니다. 이제 오류 메시지를 이해합니다. 오브젝트 유형에는 분할 메소드가 없습니다. – coson

관련 문제