jQuery 및 Twitter Bootstrap을 사용하여 활성 탭 찾기

jQuery 및 Twitter Bootstrap을 사용하여 활성 탭 찾기

---

나는 잠시 동안 내 머리를 긁어 모으고 있는데, jQuery와 Twitter의 Bootstrap을 사용하여 활성 탭을 찾는 방법을 아는 사람이 있는지 알고 싶습니다. URL에서 해시를 가져 오는 것은 첫 번째 옵션이 아니며 링크 의 data-toggle속성을 사용 <a>하므로 URL 해시를 생성 할 필요가 없습니다.

어떤 통찰력? 다음은 내 마크 업의 예입니다.

<ul class="nav nav-list" id="sampleTabs">
    <li><a href="#example" data-toggle="tab">Tab 1</a></li>
</ul>
<div class="tab-content">
    <div class="tab-pane fade active in" id="example">
        Example Tab
    </div>
</div>

<script>
$('#sampleTabs a:first').tab('show');
</script>

PHP 세션, JS 쿠키 등을 사용하여 어떤 제안이든 열려 있습니다.

편집 : 이것은 진짜 문제입니다. PHP를 사용하는 페이지 매김 시스템이 있으므로 페이지 번호 또는 다음 / 이전 화살표를 클릭하면 페이지가 다시로드됩니다. 이것이 바로 다음 페이지를로드하기 전에 활성 탭을 찾아야하는 이유입니다. URL이나 세션 등에 전달하기 때문입니다.

---

Twitter Bootstrap 은 활성 탭을 나타내는 요소에 active클래스를 할당합니다 li.

$("ul#sampleTabs li.active")

대안은 shown각 탭 의 이벤트 를 바인딩 하고 활성 탭을 저장하는 것입니다.

var activeTab = null;
$('a[data-toggle="tab"]').on('shown', function (e) {
  activeTab = e.target;
})

---

Boostrap 3 솔루션이 필요한 분들을위한 답변입니다.

부트 스트랩 3에서는 다음 줄에 'shown'대신 'shown.bs.tab'을 사용합니다.

// tab
$('#rowTab a:first').tab('show');

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
//show selected tab / active
 console.log ( $(e.target).attr('id') );
});

---

먼저 data-toggle 속성 을 제거해야 합니다. 일부 JQuery를 사용할 것이므로 포함해야합니다.

  <ul class='nav nav-tabs'>
    <li class='active'><a href='#home'>Home</a></li>
    <li><a href='#menu1'>Menu 1</a></li>
    <li><a href='#menu2'>Menu 2</a></li>
    <li><a href='#menu3'>Menu 3</a></li>
  </ul>

  <div class='tab-content'>
    <div id='home' class='tab-pane fade in active'>
      <h3>HOME</h3>
    <div id='menu1' class='tab-pane fade'>
      <h3>Menu 1</h3>
    </div>
    <div id='menu2' class='tab-pane fade'>
      <h3>Menu 2</h3>
    </div>
    <div id='menu3' class='tab-pane fade'>
      <h3>Menu 3</h3>
    </div>
  </div>
</div>

<script>
$(document).ready(function(){
// Handling data-toggle manually
    $('.nav-tabs a').click(function(){
        $(this).tab('show');
    });
// The on tab shown event
    $('.nav-tabs a').on('shown.bs.tab', function (e) {
        alert('Hello from the other siiiiiide!');
        var current_tab = e.target;
        var previous_tab = e.relatedTarget;
    });
});
</script>

참조 URL : https://stackoverflow.com/questions/12040820/find-active-tab-using-jquery-and-twitter-bootstrap