2014-02-15 4 views
0

json 형식을 사용하여 탭과 탭 콘텐츠를 동적으로 생성합니다. 자바 스크립트에서 부트 스트랩 탭의 ID를 설정하는 방법

<ul class="nav-tabs> 
    <li class = "active"> 
    <a href="javascript:void(0);" data-tab-id="step3_tab_1" id="SAMPLE"><span class="icon icon-untitled"></span> DEMO</a> 
    </li> 
</ul> 

어떻게 각 탭 아래에있는 저장 버튼 아래에 능동 탭의 ID를 설정하는 방법 : 여기

는 JSON 데이터를 통과하여 생성되는 코드이다.

<div class="tab-content"> 
    <button id="" name="demo_save" type="button" class="btn">        
     <span class="icon-floppy"></span> Save 
    </button> 
</div> 

따라서 탭이 활성화 될 때마다 해당 활성 버튼 아래의 저장 버튼이 해당 탭의 ID를 가져옵니다.

어떻게 구현할 수 있습니까? 당신이 자바 스크립트로 동적으로 탭을 생성하는 경우

$('button').on('click', function(){ 
    var id = $('li.active').find('a').data('tab-id'); 
    $(this).attr('id', id); 
}) 

답변

0

코드

$('li').on('click', function(){ 
    var id = $(this).find('a').data('tab-id'); 
    $('button').attr('id', id); 
}) 

작업을해야하지만 당신은 버튼을 클릭 할 때 탭 ID를 얻을 수 있습니다 다음 코드를 사용하여 생성 된 탭에 이벤트 수신기를 추가 할 수 있습니다.

$(document).on('click', 'ul.nav-tabs li', function() { 
    var id = $(this).find('a').data('tab-id'); // get respective tab-content's id of the tab 
    $('#'+id+'.tab-content button').attr('id', id); // set the id of button in given tab-content 
}); 
0

: (내가 제대로 당신을 이해 경우) 아래

+0

JSfiddle의 데모? – user3271762

+0

여기 내 테스트 바이올린입니다 : http://jsfiddle.net/yalight/fD9ba/ – yalight

+0

당신의 바이올린을 따라야 만 .. 내가 탭 - 탭의 ID를 얻을 수 있습니다. 그러나, 그 ID를 탭에 인쇄 할 수 없습니다 - 콘텐츠 버튼 ID. – user3271762

관련 문제