[jquery] Twitter 부트 스트랩-탭-URL이 변경되지 않음

저는 Twitter Bootstrap과 “탭”을 사용하고 있습니다.

다음 코드가 있습니다.

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#add">add</a></li>
    <li><a data-toggle="tab" href="#edit" >edit</a></li>
    <li><a data-toggle="tab" href="#delete" >delete</a></li>
</ul>

탭은 제대로 작동하지만 URL에 #add, #edit, #delete가 추가되지 않았습니다.

data-toggleURL 변경을 제거 했지만 탭이 작동하지 않습니다.

이것에 대한 해결책이 있습니까?

답변

이 코드를 사용해보십시오. URL에 탭 href를 추가하고 페이지로드시 해시를 기반으로 탭을 엽니 다.

$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop() || $('html').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});

답변

완전한 솔루션에 필요한 세 가지 구성 요소가 있습니다.

URL에 해시가있는 경우 페이지가로드 될 때 올바른 탭을 표시합니다.
탭이 변경 될 때 URL의 해시를 변경합니다.
URL (뒤로 / 앞으로 버튼)에서 해시가 변경되면 탭을 변경하고 첫 번째 탭이 올바르게 순환되는지 확인합니다.

여기에 언급 된 의견이나 수용된 답변이 이러한 모든 시나리오를 처리한다고 생각하지 않습니다.

상당히 관련되어 있기 때문에 작은 jQuery 플러그인으로 가장 적합하다고 생각합니다 : https://github.com/aidanlister/jquery-stickytabs

다음과 같이 플러그인을 호출 할 수 있습니다.

$('.nav-tabs').stickyTabs();

나는 이것에 대한 블로그 게시물을 만들었습니다. http://aidanlister.com/2014/03/persisting-the-tab-state-in-bootstrap/

답변

를 사용 하면 플러그인이 탭을 처리 data-toggle="tab" 하도록 요청 하며, 탭을 처리하는 동안 preventDefault이벤트 ( github의 코드)를 호출 합니다 .

자신의 탭 활성화를 사용하고 이벤트가 진행되도록 할 수 있습니다.

$('.nav-tabs a').click(function (e) {
    // No e.preventDefault() here
    $(this).tab('show');
});

그리고 속성을 제거해야합니다. data-toggle="tab"

의심 스러운 경우 문서를 확인하십시오 .

답변

앵커 요소가 이미 URL 해시를 변경하므로 onhashchange 이벤트를 수신하는 것도 좋은 옵션입니다. @flori가 이미 언급했듯이이 방법은 브라우저 뒤로 버튼과 함께 잘 작동합니다.

var tabs$ = $(".nav-tabs a");

$( window ).on("hashchange", function() {
    var hash = window.location.hash, // get current hash
        menu_item$ = tabs$.filter('[href="' + hash + '"]'); // get the menu element

    menu_item$.tab("show"); // call bootstrap to show the tab
}).trigger("hashchange");

마지막으로 리스너를 정의한 직후에 이벤트를 트리거하면 페이지로드시 올바른 탭을 표시하는 데 도움이됩니다.

답변

문제에 대한 나의 해결책 :

먼저 다음과 같이 data-value각 a링크 에 새 속성을 추가 합니다.

<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#tab-add" data-value="#add">add</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-edit" data-value="#edit">edit</a>
    </li>
    <li>
        <a data-toggle="tab" href="#tab-delete" data-value="#delete">delete</a>
    </li>
</ul>

둘째, 탭의 ID를 변경 (예 :에서 add로) tab-add하고 tab-접두사 를 포함하도록 href도 업데이트 합니다.

<div class="tab-content">
    <div class="tab-pane" id="tab-add">Add panel</div>
    <div class="tab-pane" id="tab-edit">Edit panel</div>
    <div class="tab-pane" id="tab-delete">Panel panel</div>
</div>

그리고 마지막으로 js 코드 :

<script type="text/javascript">
    $(function () {
        var navTabs = $('.nav-tabs a');
        var hash = window.location.hash;
        hash && navTabs.filter('[data-value="' + hash + '"]').tab('show');

        navTabs.on('shown', function (e) {
            var newhash = $(e.target).attr('data-value');
            window.location.hash = newhash;
        });
    })
</script>

다음은 jsFiddle입니다 .하지만 jsFiddle에서 사용하는 iframe 때문에 작동하지 않지만 내 솔루션의 소스를 읽을 수 있습니다.

답변

Bootstrap 3 탭을 사용하는 CakePHP와 동일한 문제가 있으며 외부 URL 및 앵커로 보낼 때 많은 솔루션을 검토 한 후 메뉴가 손실되는 섹션으로 이동합니다.

덕분에 : http://ck.kennt-wayne.de/2012/dec/twitter-bootstrap-how-to-fix-tabs

$(document).ready(function()
 {
//Redirecciona al tab, usando un prefijo al cargar por primera vez, al usar redirect en cake #_Pagos    
//Redirecciona al tab, usando #Pagos
/* Automagically jump on good tab based on anchor; for page reloads or links */
 if(location.hash)
  {
     $('a[href=' + location.hash + ']').tab('show');
  }


//Para evitar el bajar al nivel del tab, (al mostrarse el tab subimos)
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e)
{
    location.hash = $(e.target).attr('href').substr(1);
    scrollTo(0,0);
});



//Actualiza el URL con el anchor o ancla del tab al darle clic
 /* Update hash based on tab, basically restores browser default behavior to
 fix bootstrap tabs */
$(document.body).on("click", "a[data-toggle]", function(event)
  {
    location.hash = this.getAttribute("href");
  });


//Redirecciona al tab, al usar los botones de regresar y avanzar del navegador.
/* on history back activate the tab of the location hash if exists or the default tab if no hash exists */
$(window).on('popstate', function()
{
  //Si se accesa al menu, se regresa al tab del perfil (activo default), fixed conflict with menu
  //var anchor = location.hash || $("a[data-toggle=tab]").first().attr("href");
  var anchor = location.hash;
  $('a[href=' + anchor + ']').tab('show');

});

});//Fin OnReady

답변

해시 변경에 반응하는 간단한 방법도 있습니다 (예 : 뒤로 버튼). tomaszbak 솔루션에 hashchange 이벤트 리스너를 추가하기 만하면됩니다.

$(function(){
  // Change tab on load
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');

  $('.nav-tabs a').click(function (e) {
    $(this).tab('show');
    var scrollmem = $('body').scrollTop();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });

  // Change tab on hashchange
  window.addEventListener('hashchange', function() {
    var changedHash = window.location.hash;
    changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
  }, false);
});