Вкладки Twitter Bootstrap: перейти к конкретной вкладке на странице «Перезагрузка» или «Гиперссылка» - PullRequest
Новая
       36

Вкладки Twitter Bootstrap: перейти к конкретной вкладке на странице «Перезагрузка» или «Гиперссылка»

332 голосов
/ 23 октября 2011

Я разрабатываю веб-страницу, на которой я использую Twitter Bootstrap Framework и их Bootstrap Tabs JS .Он отлично работает, за исключением нескольких мелких проблем, одна из которых заключается в том, что я не знаю, как перейти непосредственно к конкретной вкладке из внешней ссылки.Например: 

<a href="facility.php#home">Home</a>
<a href="facility.php#notes">Notes</a>

должен переходить на вкладку "Главная" и на вкладку "Примечания" соответственно при переходе по ссылкам с внешней страницы

Ответы [ 24 ]

5 голосов
/ 07 февраля 2017

Спасибо, что поделились своими взглядами.

Прочитав все решения. Я придумал решение, которое использует хэш url или localStorage в зависимости от доступности последнего с кодом ниже: 

$(function(){
    $(document).on('shown.bs.tab', 'a[data-toggle="tab"]', function (e) {
        localStorage.setItem('activeTab', $(e.target).attr('href'));
    })

    var hash = window.location.hash;
    var activeTab = localStorage.getItem('activeTab');

    if(hash){
          $('#project-tabs  a[href="' + hash + '"]').tab('show');   
    }else if (activeTab){
        $('#project-tabs a[href="' + activeTab + '"]').tab('show');
    }
});
5 голосов
/ 10 августа 2012 
$(function(){
  var hash = window.location.hash;
  hash && $('ul.nav a[href="' + hash + '"]').tab('show');
});

Этот код из http://github.com/twitter/bootstrap/issues/2415#issuecomment-4450768 отлично сработал для меня.

5 голосов
/ 25 февраля 2013

@ flynfish + решение @Ztyx, которое я использую для вложенных вкладок: 

    handleTabLinks();

    function handleTabLinks() {
        if(window.location.hash == '') {
            window.location.hash = window.location.hash + '#_';
        }
        var hash = window.location.hash.split('#')[1];
        var prefix = '_';
        var hpieces = hash.split('/');
        for (var i=0;i<hpieces.length;i++) {
            var domelid = hpieces[i].replace(prefix,'');
            var domitem = $('a[href=#' + domelid + '][data-toggle=tab]');
            if (domitem.length > 0) {
                domitem.tab('show');
            }
        }
        $('a[data-toggle=tab]').on('shown', function (e) {
            if ($(this).hasClass('nested')) {
                var nested = window.location.hash.split('/');
                window.location.hash = nested[0] + '/' + e.target.hash.split('#')[1];
            } else {
                window.location.hash = e.target.hash.replace('#', '#' + prefix);
            }
        });
    }

у детей должен быть class = "nested"

4 голосов
/ 17 октября 2012

Я бы посоветовал вам использовать код, предоставленный авторами Bootstrap на их трекере проблем на GitHub : 

var hash = location.hash
  , hashPieces = hash.split('?')
  , activeTab = $('[href=' + hashPieces[0] + ']');
activeTab && activeTab.tab('show');

. Вы можете найти по ссылке к проблеме дополнительную информацию о том, почему онине хотел поддерживать это.

3 голосов
/ 29 января 2016

Попробовал несколько способов, описанных выше, и в итоге получил следующее рабочее решение, просто попробуйте скопировать и вставить в ваш редактор.Для проверки просто измените хэш на входящие, исходящие, скомпонуйте в URL и нажмите клавишу ввода. 

<html>
    <head>
        <link type='text/css' rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' />
        <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container body-content">
            <ul class="nav nav-tabs">
                <li class="active"><a data-toggle="tab" href="#inbox">Inbox</a></li>
                <li><a data-toggle="tab" href="#outbox">Outbox</a></li>
                <li><a data-toggle="tab" href="#compose">Compose</a></li>
            </ul>
            <div class="tab-content">
                <div id="inbox" class="tab-pane fade in active">
                    Inbox Content
                </div>
                <div id="outbox" class="tab-pane fade">
                    Outbox Content
                </div>
                <div id="compose" class="tab-pane fade">
                    Compose Content
                </div>
            </div>
        </div>
        <script>
            $(function () {
                var hash = window.location.hash;
                hash && $('ul.nav a[href="' + hash + '"]').tab('show');
            });
        </script>
    </body>
</html>

Надеюсь, это сэкономит ваше время.

3 голосов
/ 19 января 2013

Вот что я сделал, очень просто, и, если у ваших ссылок на вкладках есть ID, связанный с ними, вы можете получить атрибут href и передать его функции, которая показывает содержимое вкладки: 

<script type="text/javascript">
        jQuery(document).ready(function() {
            var hash = document.location.hash;
            var prefix = "tab_";
            if (hash) {
                var tab = jQuery(hash.replace(prefix,"")).attr('href');
                jQuery('.nav-tabs a[href='+tab+']').tab('show');
            }
        });
        </script>

Затем в своем URL вы можете добавить хеш в виде чего-то вроде: # tab_tab1, часть 'tab_' удаляется из самого хэша, поэтому после этого помещается идентификатор фактической ссылки вкладки в навигационных вкладках (tabid1). поэтому ваш URL будет выглядеть примерно так: www.mydomain.com/index.php#tab_tabid1.

Это прекрасно работает для меня и надеюсь, что это поможет кому-то еще: -)

2 голосов
/ 04 апреля 2019

Просто вставьте этот код на свою страницу: 

$(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();
    window.location.hash = this.hash;
    $('html,body').scrollTop(scrollmem);
  });
});
2 голосов
/ 23 января 2015

Мне пришлось изменить некоторые биты, чтобы это работало на меня.Я использую Bootstrap 3 и jQuery 2 

// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "!";
if (hash) {
    hash = hash.replace(prefix,'');
    var hashPieces = hash.split('?');
    activeTab = $('[role="tablist"] a[href=' + hashPieces[0] + ']');
    activeTab && activeTab.tab('show');
}

// Change hash for page-reload
$('[role="tablist"] a').on('shown.bs.tab', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
2 голосов
/ 14 июля 2013

Это мое решение для обработки вложенных вкладок.Я просто добавил функцию, чтобы проверить, есть ли на активной вкладке родительская вкладка для активации.Это функция: 

function activateParentTab(tab) {
    $('.tab-pane').each(function() {
        var cur_tab = $(this);
        if ( $(this).find('#' + tab).length > 0 ) {
            $('.nav-tabs a[href=#'+ cur_tab.attr('id') +']').tab('show');
            return false;
        }
    });
}

И может быть вызвана так (на основе решения @ flynfish): 

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

// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
    window.location.hash = e.target.hash.replace("#", "#" + prefix);
});

Это решение в настоящее время работает для меня довольно хорошо.Надеюсь, что это может быть полезно для кого-то еще;)

1 голос
/ 15 января 2016

Объединяя кусочки из других ответов, вот решение, которое может открыть много уровней вложенных вкладок: 

// opens all tabs down to the specified tab
var hash = location.hash.split('?')[0];
if(hash) {
  var $link = $('[href=' + hash + ']');
  var parents = $link.parents('.tab-pane').get();
  $(parents.reverse()).each(function() {
    $('[href=#' + this.id + ']').tab('show') ;
  });
  $link.tab('show');
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...