Связываемые вкладки с историей - проблема с кнопкой «Назад» - PullRequest
Новая
       43

Связываемые вкладки с историей - проблема с кнопкой «Назад»

0 голосов
/ 20 декабря 2018

Мне нужна ваша помощь, мне бы хотелось, чтобы вкладки были связаны между собой, на данный момент это работает очень хорошо, проблема в истории: когда мы нажимаем кнопку браузера в браузере, адрес меняется хорошо, но вкладкане включается ... (я использую jQuery и boostrap)

html: 

    <ul class="nav nav-tabs tpl-tabs animate">
      <li class="active"> <a href="#tab1" data-toggle="tab">Tab1</a> </li>
      <li> <a href="#tab2" data-toggle="tab">Tab1</a> </li>
      <li> <a href="#tab3" data-toggle="tab">Tab3</a> </li>
    </ul>

JS: (добавлено для создания связанных вкладок) 

var hash = document.location.hash;
var prefix = "tab_";

if(hash){
    $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
        }

$(".nav-tabs a").on("shown.bs.tab", function(e){
    window.location.hash = e.target.hash.replace("#","#" + prefix);
        });

Ответы [ 3 ]

0 голосов
/ 20 декабря 2018

Спасибо mkbctrl за ваш ответ!Я думаю, что это работает, я сделал смесь из двух кодов, чтобы избежать прокрутки к идентификатору, когда мы используем историю, и для того, чтобы сделать прямую ссылку на конкретной вкладке.Это, конечно, не очень чисто, потому что я новичок, но это работает! 

var prefix = "tab_";
var hash = document.location.hash;
if(hash){
        $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
    }

$('a[data-toggle="tab"]').on('click', function() {
        history.pushState(null, null, $(this).attr('href').replace("#","#" + prefix));
    });

    function locationHashChanged() {
            var activeTab = $("[href=" + document.location.hash.replace(prefix,"") + "]");
            if (activeTab.length) {
                activeTab.tab('show');
            } else {
              $('.nav-tabs a:first').tab('show');
            }
        }
    window.onhashchange = locationHashChanged;

Я удалил это из bootstrap.css, потому что у меня была проблема с отображением при использовании истории: 

.nav>li>a:hover, .nav>li>a:focus {
text-decoration: none;
/*background-color:#eee; Removed*/

}

Итак, большое спасибо!

0 голосов
/ 28 февраля 2019

@ tartartartar

Спасибо, что вернулись и опубликовали свое окончательное решение!Я пытался заставить ссылки на вкладки работать правильно для меня.Ваш «смешанный» код работал отлично, за исключением того, что активировалась первая вкладка, если хеша нет, и кнопки «Назад», если хеша нет.Я использую классы .active, чтобы это могло иметь значение.Чтобы сделать первую вкладку активной, если хеш отсутствует, я добавил оператор else после первого оператора if: 

var prefix = "tab_";
var hash = document.location.hash;
if(hash){
   $(".nav-tabs a[href=" + hash.replace(prefix, "") + "]").tab("show");
} else {
   $('.nav-tabs a:first').addClass('active');
  }

Следующий код работал с использованием кнопки «Назад», пока не было хэша.(index.html против index.html#tab_blue): 

function locationHashChanged() {
  var activeTab = $("[href=" + document.location.hash.replace(prefix,"") + "]");
  if (activeTab.length) {
    activeTab.tab('show');
  } else {
      $('.nav-tabs a:first').tab('show');
    }
}
window.onhashchange = locationHashChanged;

После настройки alert(activeTab.length); непосредственно перед оператором if я заметил, что он вернет «1» для хэша и «4» для нетхэш, поэтому я добавил оператор идентификации ===, чтобы проверить значение.Я также добавил .removeClass, чтобы убедиться, что не было двух активных вкладок одновременно: 

if (activeTab.length === 1) {
  activeTab.tab('show');
} else {
    $('.nav-tabs li').removeClass('active');
    $('.tab-content ul').removeClass('active');
    $('.nav-tabs li:first').addClass('active');
    $('.tab-content ul:first').addClass('active');
  }
}
window.onhashchange = locationHashChanged;
0 голосов
/ 20 декабря 2018

Я думаю, я бы пошел со слушателем onhashchange здесь.

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onhashchange

или, если вы хотите создать более надежное решение, я бы использовал содержание из этой статьи:

http://www.redotheweb.com/2012/05/17/enable-back-button-handling-with-twitter-bootstrap-tabs-plugin.html

, где вы можете найти, как правильно использовать History API

...