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

87

저는 현재 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>
javascript  jquery  twitter-bootstrap 
— 폴
소스
1
이것은 중복 질문하는 것 같다 stackoverflow.com/questions/18999501/...
— koppor
— Tim Abell 2014

답변:

138

이를 관리하려면 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');
    }
});
— dgabriel
소스
멋진 한 새싹, 솔루션이 joomla 30 core, joomlacode.org/gf/project/joomla/tracker/…에
— Benn
12
$(this).attr('href')대신 $(e.target).attr('id')완전한 URL없이 해시를 제공 하는 것이 좋습니다 . 대신에 .tab()a 태그 를 적용해야 data-toggle="tab"합니다 $('#'+lastTab). 참조 : stackoverflow.com/questions/16808205/…
— Bass Jobsen 2013 년
3
Bootstrap 3에서 메서드가 약간 변경된 shown것 같습니다. 더 이상 작동하지 않는 것 같고 shown.bs.tab. 참고 : 저는 경제학을 이해하고있을뿐만 아니라 자바 스크립트 등을 이해합니다. 그래서 무슨 일이 일어나고 있는지 아는 사람이 저를 수정 해 주시기 바랍니다.
— Chaz
10
여러 탭 컨트롤 (및 부트 스트랩 3)과 함께 작동하도록 수정 : gist.github.com/brendanmckenzie/8f8008d3d51c07b2700f
— Brendan
1
첫 번째 탭으로 이동하고 새로 고침 후 현재 탭으로 돌아갑니다
— Raviteja
23

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

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

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');
  }
});
— Ricsrock
소스
논리적으로 보이지만 localStorage 솔루션이 작동하도록 할 수 없습니다. 이 솔루션은 즉시 사용할 수 있으며 $ .cookie 플러그인은 매우 편리합니다.
— Michael J. Calkins 2013
클래스를 제거하고 추가하는 대신 data-toggle = "tab"을 사용하여 태그에 .tab ()을 적용하십시오. stackoverflow.com/questions/16808205/…
— Bass Jobsen
내 레이아웃의 경우 div에 'fade in active'를 사용했기 때문에 마지막 두 줄을 변경하여 'in active'를 추가하거나 제거해야했습니다.
— Obromios 2016
18

다른 모든 답변은 정확합니다. 이 답변은 한 페이지 가 여러 개 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가 있는지 확인하십시오 . 감사합니다 알랭

— Oktav
소스
2
또한 BS3의 경우 'shown'이벤트를 'shown.bs.tab'로 바꾸십시오
— Alain
18

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

$(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();
  }
});
— Vaimeo
소스
12

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

<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>
— 코 포르
소스
이 답변에 감사드립니다. 그것은 나를 위해 잘 작동하고 나는이 문제에 대해서만 쿠키를 다루고 싶지 않았기 때문에 훌륭합니다.
— nico008 2013.11.07
@koppor, 이것은 작동하지 않습니다 포스트 백 이벤트가 있습니다. 나는 linkbutton을 추가 <asp:LinkButton CssClass="form-search" ID="LinkButtonSearch" runat="server">Search</asp:LinkButton> 했습니다. 버튼을 클릭하면 현재 탭이 아닌 활성화되는 기본 탭입니다. 어떻게 고칠 수 있습니까?
— Djama
6

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

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

<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');
        }
    });
— 제퍼슨 테노리오
소스
3

페이딩 효과를 원하십니까? @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");
    }
  });
});
— 래리 K
소스
3

여러 페이지에 탭이 있고 localStorage는 이전 페이지의 lastTab도 유지하므로 다음 페이지의 경우 저장소에 이전 페이지의 lastTab이 있으므로 여기에서 일치하는 탭을 찾지 못하여 아무것도 표시되지 않았습니다. 나는 이것을 이렇게 수정했다.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //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 ($('a[href=' + lastTab + ']').length > 0) {
        $('a[href=' + lastTab + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})

편집 :lastTab 다른 페이지에 대해 다른 변수 이름 을 가져야한다는 것을 알았습니다 . 그렇지 않으면 항상 서로 덮어 쓰게됩니다. 예를 들면 lastTab_klanten, lastTab_bestellingen등 두 개의 다른 페이지 klanten와 bestellingen탭 표시 모두 갖는 데이터.

$(document).ready(function(){
    //console.log($('a[data-toggle="tab"]:first').tab('show'))
    $('a[data-toggle="tab"]').on('shown.bs.tab', function () {
        //save the latest tab; use cookies if you like 'em better:
        localStorage.setItem('lastTab_klanten', $(this).attr('href'));
    });

    //go to the latest tab, if it exists:
    var lastTab_klanten = localStorage.getItem('lastTab_klanten');
    if (lastTab_klanten) {
        $('a[href=' + lastTab_klanten + ']').tab('show');
    }
    else
    {
        // Set the first tab if cookie do not exist
        $('a[data-toggle="tab"]:first').tab('show');
    }
})
— 고 하르 사히
소스
3

나는 @dgabriel와 유사한 솔루션으로 작동하도록 만들었습니다.이 경우에는 링크 <a>가 필요하지 않으며 id위치에 따라 현재 탭을 식별합니다.

$(function() { 
  $('a[data-toggle="tab"]').on('shown', function (e) {
    var indexTab = $('a[data-toggle="tab"]').index($(this)); // this: current tab anchor
    localStorage.setItem('lastVisitedTabIndex', indexTab);
  });

  //go to the latest tab, if it exists:
  var lastIndexTab  = localStorage.getItem('lastVisitedTabIndex');
  if (lastIndexTab) {
      $('a[data-toggle="tab"]:eq(' + lastIndexTab + ')').tab('show');
  }
});
— Jaider
소스
귀하의 코드가 getItem이 표시되기 전에 잘못된 방식이라고 생각하며 indexTab을 두 번 선언하는 문제도 해결합니다.
— John Magnolia
@JohnMagnolia 나는 indexTab두 번 이름을 지 었지만 차이점입니다. 인덱스. 그래서 두 번째 전화를하겠습니다 lastIndexTab. 에 관해서 shown는 이벤트이므로 탭을 열 때까지 트리거되지 않으므로 이전인지 여부는 중요하지 않습니다 getItem.
— Jaider
1

다음 변경을 제안합니다

  1. amplify.store 와 같은 플러그인을 사용하여 대체 대체 기능이있는 크로스 브라우저 / 크로스 플랫폼 로컬 스토리지 API를 제공합니다.

  2. $('#div a[data-toggle="tab"]')이 기능을 동일한 페이지에있는 여러 탭 컨테이너로 확장하기 위해 저장해야하는 탭을 대상으로 지정 하십시오.

  3. 고유 식별자 (url ??)를 사용하여 여러 페이지에서 마지막으로 사용한 탭을 저장하고 복원합니다.

$(function() { 
  $('#div a[data-toggle="tab"]').on('shown', function (e) {
    amplify.store(window.location.hostname+'last_used_tab', $(this).attr('href'));
  });

  var lastTab = amplify.store(window.location.hostname+'last_used_tab');
  if (lastTab) {
    $("#div a[href="+ lastTab +"]").tab('show');
  }
});
— Sandeep
소스
1

로컬 스토리지가없는 간단한 솔루션 :

$(".nav-tabs a").on("click", function() {
    location.hash = $(this).attr("href");
});
— 프란체스코 보르 지
소스
0

서버 측 접근 방식. 지정되지 않은 경우 모든 html 요소에 class = ""가 있는지 확인하거나 null을 처리해야합니다.

    private void ActiveTab(HtmlGenericControl activeContent, HtmlGenericControl activeTabStrip)
    {
        if (activeContent != null && activeTabStrip != null)
        {
            // Remove active from content
            Content1.Attributes["class"] = Content1.Attributes["class"].Replace("active", "");
            Content2.Attributes["class"] = Content2.Attributes["class"].Replace("active", "");
            Content3.Attributes["class"] = Content3.Attributes["class"].Replace("active", "");

            // Remove active from tab strip
            tabStrip1.Attributes["class"] = tabStrip1.Attributes["class"].Replace("active", "");
            tabStrip2.Attributes["class"] = tabStrip2.Attributes["class"].Replace("active", "");
            tabStrip3.Attributes["class"] = tabStrip3.Attributes["class"].Replace("active", "");

            // Set only active
            activeContent.Attributes["class"] = activeContent.Attributes["class"] + " active";
            activeTabStrip.Attributes["class"] = activeTabStrip.Attributes["class"] + " active";
        }
    }
— 마이클 골드 슈미트
소스
0

페이지를 처음 입력 할 때 첫 번째 탭을 표시하려면 다음 코드를 사용하십시오.

    <script type="text/javascript">
        function invokeMeMaster() {
        var chkPostBack = '<%= Page.IsPostBack ? "true" : "false" %>';
            if (chkPostBack == 'false') {
                $(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'));
                    });

                });
            }
            else {
                $(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');
                    }

                });

            }
        }
        window.onload = function() { invokeMeMaster(); };

    </script>
스 니펫 확장

— 루벤
소스
0

다음은 Bootstrap 3 및 jQuery 및 다른 탭을 포함하는 다른 URL에서 작동하는 스 니펫 입니다. 페이지 당 여러 탭을 지원하지는 않지만 해당 기능이 필요한 경우 쉽게 수정할 수 있습니다.

/**
 * Handles 'Bootstrap' package.
 *
 * @namespace bootstrap_
 */

/**
 * @var {String}
 */
var bootstrap_uri_to_tab_key = 'bootstrap_uri_to_tab';

/**
 * @return {String}
 */
function bootstrap_get_uri()
{
    return window.location.href;
}

/**
 * @return {Object}
 */
function bootstrap_load_tab_data()
{
    var uriToTab = localStorage.getItem(bootstrap_uri_to_tab_key);
    if (uriToTab) {
    try {
        uriToTab = JSON.parse(uriToTab);
        if (typeof uriToTab != 'object') {
        uriToTab = {};
        }
    } catch (err) {
        uriToTab = {};
    }
    } else {
    uriToTab = {};
    }
    return uriToTab;
}

/**
 * @param {Object} data
 */
function bootstrap_save_tab_data(data)
{
    localStorage.setItem(bootstrap_uri_to_tab_key, JSON.stringify(data));
}

/**
 * @param {String} href
 */
function bootstrap_save_tab(href)
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    uriToTab[uri] = href;
    bootstrap_save_tab_data(uriToTab);
}

/**
 *
 */
function bootstrap_restore_tab()
{
    var uri = bootstrap_get_uri();
    var uriToTab = bootstrap_load_tab_data();
    if (uriToTab.hasOwnProperty(uri) &&
    $('[href="' + uriToTab[uri] + '"]').length) {
    } else {
    uriToTab[uri] = $('a[data-toggle="tab"]:first').attr('href');
    }
    if (uriToTab[uri]) {
        $('[href="' + uriToTab[uri] + '"]').tab('show');
    }
}

$(document).ready(function() {

    if ($('.nav-tabs').length) {

    // 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) {
        bootstrap_save_tab($(this).attr('href'));
    });
    bootstrap_restore_tab();

    }

});
— 크 요한슨
소스
0

$ (문서) .ready (function () {

        if (JSON.parse(localStorage.getItem('currentClass')) == "active")
        {
            jQuery('#supporttbl').addClass('active')
            $('.sub-menu').css({ "display": "block" });
        }

        $("#supporttbl").click(function () { 
            var currentClass;
            if ($(this).attr('class')== "active") { 

                currentClass = $(this).attr('class');

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').addClass('active')
                $('.sub-menu').css({ "display": "block" });

            } else {

                currentClass = "Null"; 

                localStorage.setItem('currentClass', JSON.stringify(currentClass));
                console.log(JSON.parse(localStorage.getItem('currentClass')));

                jQuery('#supporttbl').removeClass('active')
                $('.sub-menu').css({ "display": "none" });

            }  
        });

});

— 디 네쉬 파티 다르
소스
0

페이지에 탭이 두 개 이상있는 경우 다음 코드를 사용할 수 있습니다.

<script type="text/javascript">
$(document).ready(function(){
    $('#profileTabs').on('show.bs.tab', function(e) {
        localStorage.setItem('profileactiveTab', $(e.target).attr('href'));
    });
    var profileactiveTab = localStorage.getItem('profileactiveTab');
    if(profileactiveTab){
        $('#profileTabs a[href="' + profileactiveTab + '"]').tab('show');        
    }
    $('#charts-tab').on('show.bs.tab', function(e) {
        localStorage.setItem('chartsactiveTab', $(e.target).attr('href'));
    });
    var chartsactiveTab = localStorage.getItem('chartsactiveTab');
    if(chartsactiveTab){
        $('#charts-tab a[href="' + chartsactiveTab + '"]').tab('show');        
    }     
});
</script>
— 모하메드 사미
소스
0

그러면 탭이 새로 고쳐 지지만 컨트롤러의 모든 항목이로드 된 후에 만 ​​해당됩니다.

// >= angular 1.6 angular.element(function () {
angular.element(document).ready(function () {
    //Here your view content is fully loaded !!
    $('li[href="' + location.hash + '"] a').tab('show');
});
— PHPGuru
소스
0

MVC와 함께 사용하고 있습니다.

  • 모델에 POST 메소드로 값을 보내는 SelectedTab 정수 필드가 있습니다.

JavaScript 섹션 :

<script type="text/javascript">
    $(document).ready(function () {
       var index = $("input#SelectedTab").val();
       $("#tabstrip > ul li:eq(" + index + ")").addClass("k-state-active");

       $("#tabstrip").kendoTabStrip();
    });
    function setTab(index) {
      $("input#SelectedTab").val(index)
    }
</script>

HTML 섹션 :

@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.HiddenFor(model => model.SelectedTab)
<div id="tabstrip">
    <ul>
        <li onclick="setTab(0)">Content 0</li>
        <li onclick="setTab(1)">Content 1</li>
        <li onclick="setTab(2)">Content 2</li>
        <li onclick="setTab(3)">Content 3</li>
        <li onclick="setTab(4)">Content 4</li>
    </ul>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
    <div>

    </div>
</div>
<div class="content">
    <button type="submit" name="save" class="btn bg-blue">Save</button>
</div>
}
— 카를로스 톨레도
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.