Начальная загрузка, навигационные вкладки, выпадающие меню; как установить активную вкладку на основе URI

Я немного опоздал на вечеринку, но только что наткнулся на этот пост и решил добавить свои дополнительные 2 цента...

В принципе, лучший метод, который я нашел для установки вкладки/таблетки активной начальной загрузки, - это использование Javascript/jQuery для сопоставления текущего URL-адреса с href активной ссылки.

Поэтому, если ваше меню настроено следующим образом:

<ul class="nav nav-tabs">
    <li><a href="/page1.html" data-toggle="tab">Page 1</a></li>
    <li><a href="/page2.html" data-toggle="tab">Page 2</a></li>
</ul>

Ваш jQuery будет:

$(document).ready(function() {

    $('.nav-tabs a[href="'+location.href+'"]').parents('li').addClass('active');

});

Это предполагает отсутствие пути для ссылки href, но это может быть легко переопределено чем-то например:

$(document).ready(function() {

    var url_parts = location.href.split('/');

    var last_segment = url_parts[url_parts.length-1];

    $('.nav-tabs a[href="' + last_segment + '"]').parents('li').addClass('active');

  });

Надеюсь, это поможет кому-нибудь во Вселенной!:)

Ура!

Я столкнулся с аналогичной проблемой, когда у меня было несколько URL-адресов страниц, таких как: www.somedomain.com/pages/xyz/abc/samplepage.html

Этот код сработал в моем случае как по волшебству.

    $(document).ready(function() {
        var permalink_nodomain = window.location.pathname;
        $('.nav-tabs a[href="' + permalink_nodomain + '"]').parents('li').addClass('active');
    });

Может быть, кто-то все еще ищет это решение, как и я:)

Использование PHP для установки активного не является идеальным способом, так как PHP - это код на стороне сервера, а начальная загрузка - это пользовательский интерфейс на стороне клиента. Недавно у меня был проект с использованием начальной загрузки, и я обнаружил, что та же проблема довольно раздражает, учитывая, насколько мощна начальная загрузка, и искренне надеюсь, что они исправят это в предстоящем выпуске 3.0.

Способ, которым я это исправил, состоял в том, чтобы использовать jquery для ссылки на уникальный идентификатор в теге ссылки и обновлять значение активной вкладки на основе этого.

Так что на самом деле все, что сделал jquery, это удалил активный класс и назначьте его текущей нажатой ссылке.

Если вы все еще хотите использовать URL-адрес, я бы посоветовал вам использовать javascript/jquery вместо PHP. Ознакомьтесь с этой статьей о том, как это сделать. http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

Надеюсь, это поможет.

Вкладка активна на стороне клиента, а не на сервере. Это связано с тем, что обычно все содержимое каждой вкладки на самом деле уже есть в документе при загрузке страницы. Нажатие на вкладку просто скрывает одну вкладку, а затем показывает вкладку с идентификатором, на который ссылается элемент привязки.

Вот как выглядит простейшая реализация вкладки начальной загрузки:

<!-- tab navigation -->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#tab1">Home</a>
    </li>
    <li><a href="#tab2">...</a></li>
    <li><a href="#tab3">...</a></li>
</ul>

<!-- tab contents are inside -->
<div class="tab-content">
    <!-- content of each tab is put inside a tab-pane or tab-pill -->
    <div class="tab-pane active" id="tab1">
        <p>content of tab 1</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 2</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 3</p>
    </div>
</div>

Это еще не все, вам все равно нужно активировать вкладку с помощью JS, например это:

$('ul.nav.nav-tabs > li > a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
});

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

Если вашей целью было показать определенную вкладку в ответ на запрос. Просто добавьте класс "активный" в элемент div, который обертывает его содержимое.

А затем сделайте так, чтобы это было видно:

$('tab-pane active').tab('show');

Примечание: все, что вам нужно сделать, это добавить активный в каждый раз в нужном месте.

Конкретно для вас проблема заключается в вашем jQuery. Вот правильный способ написать это:

$('#supernav active').tab('show');

Использование начальной загрузки 4

Дано (HAML)

%nav.nav.nav-pills.flex-column
  %a.nav-link.active{href: '#users', 'data-toggle'=>'pill', role: 'tab'} Users
  %a.nav-link{href: '#deals', 'data-toggle'=>'pill', role: 'tab'} Deals
  %a.nav-link{href: '#facilitators', 'data-toggle'=>'pill', role: 'tab'} Facilitators

Это сведено к (Coffeescript)

if location.hash
  $('nav.nav-pills a[href="'+location.hash+'"]').tab('show')

Документ: http://v4-alpha.getbootstrap.com/components/navs/#via-javascript