[javascript] 페이지를 다시로드 한 후 트위터 부트 스트랩을 사용하여 현재 탭을 활성화하려면 어떻게해야합니까?

Program / 글쓴이

저는 현재 Twitter Bootstrap에서 탭을 사용하고 있으며 사용자가 데이터를 게시하고 페이지를 다시로드 한 후 동일한 탭을 선택하고 싶습니다.

어떻게하나요?

탭을 초기화하는 현재 호출은 다음과 같습니다.

<script type="text/javascript">

$(document).ready(function() {

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

내 탭 :

<ul id="profileTabs" class="nav nav-tabs">
    <li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
    <li><a href="#about" data-toggle="tab">About Me</a></li>
    <li><a href="#match" data-toggle="tab">My Match</a></li>
</ul>

답변

이를 관리하려면 localStorage 또는 쿠키를 사용해야합니다. 크게 개선 할 수 있지만 시작점을 제공 할 수있는 빠르고 더러운 솔루션이 있습니다.

$(function() {
    // for bootstrap 3 use 'shown.bs.tab', for bootstrap 2 use 'shown' in the next line
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        // save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab', $(this).attr('href'));
    });

    // go to the latest tab, if it exists:
    var lastTab = localStorage.getItem('lastTab');
    if (lastTab) {
        $('[href="' + lastTab + '"]').tab('show');
    }
});

답변

쿠키를 사용하여 작동하고 다른 탭 및 탭 창에서 ‘활성’클래스를 제거하고 현재 탭 및 탭 창에 ‘활성’클래스를 추가합니다.

이 작업을 수행하는 더 좋은 방법이 있다고 확신하지만이 경우에는 작동하는 것 같습니다.

jQuery 쿠키 플러그인이 필요합니다.

$(function() {
  $('a[data-toggle="tab"]').on('shown', function(e){
    //save the latest tab using a cookie:
    $.cookie('last_tab', $(e.target).attr('href'));
  });

  //activate latest tab, if it exists:
  var lastTab = $.cookie('last_tab');
  if (lastTab) {
      $('ul.nav-tabs').children().removeClass('active');
      $('a[href='+ lastTab +']').parents('li:first').addClass('active');
      $('div.tab-content').children().removeClass('active');
      $(lastTab).addClass('active');
  }
});

답변

다른 모든 답변은 정확합니다. 이 답변은 한 페이지 가 여러 개 ul.nav.nav-pills이거나 ul.nav.nav-tabs같은 페이지에 있을 수 있다는 사실을 고려합니다 . 이 경우 이전 답변이 실패합니다.

여전히 사용 localStorage중이지만 JSON값 으로 문자열 화 되었습니다. 다음은 코드입니다.

$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown', function(e) {
    var href, json, parentId, tabsState;

    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;

    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });

  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");

  $.each(json, function(containerId, href) {
    return $("#" + containerId + " a[href=" + href + "]").tab('show');
  });

  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      return $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first").tab("show");
    }
  });
});

이 비트는 모든 페이지의 전체 앱에서 사용할 수 있으며 탭과 알약 모두에서 작동합니다. 또한 탭이나 알약이 기본적으로 활성화되어 있지 않은지 확인하세요. 그렇지 않으면 페이지로드시 깜박임 효과가 나타납니다.

중요 : 부모 ul에게 ID가 있는지 확인하십시오 . 감사합니다 알랭

답변

최상의 옵션을 위해 다음 기술을 사용하십시오.

$(function() {
  //for bootstrap 3 use 'shown.bs.tab' instead of 'shown' in the next line
  $('a[data-toggle="tab"]').on('click', function (e) {
    //save the latest tab; use cookies if you like 'em better:
    localStorage.setItem('lastTab', $(e.target).attr('href'));
  });

  //go to the latest tab, if it exists:
  var lastTab = localStorage.getItem('lastTab');

  if (lastTab) {
    $('a[href="'+lastTab+'"]').click();
  }
});

답변

창의 해시 값에 선택한 탭을 저장하는 것을 선호합니다. 또한 “동일한”페이지를 보는 동료에게 링크를 보낼 수 있습니다. 트릭은 다른 탭을 선택할 때 위치의 해시를 변경하는 것입니다. 페이지에서 이미 #을 사용하고 있다면 해시 태그를 분할해야 할 수 있습니다. 내 앱에서 “:”를 해시 값 구분 기호로 사용합니다.

<ul class="nav nav-tabs" id="myTab">
    <li class="active"><a href="#home">Home</a></li>
    <li><a href="#profile">Profile</a></li>
    <li><a href="#messages">Messages</a></li>
    <li><a href="#settings">Settings</a></li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="home">home</div>
    <div class="tab-pane" id="profile">profile</div>
    <div class="tab-pane" id="messages">messages</div>
    <div class="tab-pane" id="settings">settings</div>
</div>

<script>
    $('#myTab a').click(function (e) {
        e.preventDefault()
        $(this).tab('show')
    });

    // store the currently selected tab in the hash value
    $("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
        var id = $(e.target).attr("href").substr(1);
        window.location.hash = id;
    });

    // on load of the page: switch to the currently selected tab
    var hash = window.location.hash;
    $('#myTab a[href="' + hash + '"]').tab('show');
</script>

답변

첫 번째 탭에서 페이지가 깜박 인 다음 쿠키에 의해 저장된 탭을 방지하려면 (첫 번째 탭에서 기본적으로 “활성”클래스를 결정할 때 발생 함)

다음과 같은 탭 및 창의 클래스 “활성”을 제거합니다. 

<ul class="nav nav-tabs">
<div id="p1" class="tab-pane">

아래 스크립트를 넣어 첫 번째 탭을 기본값과 같이 설정하십시오 (jQuery 쿠키 플러그인 필요).

    $(function() {
        $('a[data-toggle="tab"]').on('shown', function(e){
            //save the latest tab using a cookie:
            $.cookie('last_tab', $(e.target).attr('href'));
        });
        //activate latest tab, if it exists:
        var lastTab = $.cookie('last_tab');
        if (lastTab) {
            $('a[href=' + lastTab + ']').tab('show');
        }
        else
        {
            // Set the first tab if cookie do not exist
            $('a[data-toggle="tab"]:first').tab('show');
        }
    });

답변

페이딩 효과를 원하십니까? @Oktav 코드의 업데이트 된 버전 :

  1. 부트 스트랩 3의 경우
  2. 페이딩이 제대로 작동 할 수 있도록 li 및 탭의 div에 클래스를 설정합니다. 모든 콘텐츠 div에는class="tab-pane fade"

암호: 

// See http://stackoverflow.com/a/16984739/64904
// Updated by Larry to setup for fading
$(function() {
  var json, tabsState;
  $('a[data-toggle="pill"], a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var href, json, parentId, tabsState;
    tabsState = localStorage.getItem("tabs-state");
    json = JSON.parse(tabsState || "{}");
    parentId = $(e.target).parents("ul.nav.nav-pills, ul.nav.nav-tabs").attr("id");
    href = $(e.target).attr('href');
    json[parentId] = href;
    return localStorage.setItem("tabs-state", JSON.stringify(json));
  });
  tabsState = localStorage.getItem("tabs-state");
  json = JSON.parse(tabsState || "{}");
  $.each(json, function(containerId, href) {
    var a_el = $("#" + containerId + " a[href=" + href + "]");
    $(a_el).parent().addClass("active");
    $(href).addClass("active in");
    return $(a_el).tab('show');
  });
  $("ul.nav.nav-pills, ul.nav.nav-tabs").each(function() {
    var $this = $(this);
    if (!json[$this.attr("id")]) {
      var a_el = $this.find("a[data-toggle=tab]:first, a[data-toggle=pill]:first"),
          href = $(a_el).attr('href');
      $(a_el).parent().addClass("active");
      $(href).addClass("active in");
      return $(a_el).tab("show");
    }
  });
});