it-swarm.com.ru

Twitter Bootstrap Tabs Активный класс не работает

Я использую щебетать навигационные вкладки и таблетки. Это мой HTML-код:

<div class="Header2" style="background-color:#1E3848">
    <div id="headerTab">
        <ul class="nav nav-tabs">
            <li class="active ans-tab"> <a href="http://myweb.com/">Home</a></li>
            <li class="topTab"><a href="http://myweb.com/score/">Score</a></li>
            <li class="topTab"><a href="http://myweb.com/leaderboards/">Leaderboards</a></li>
        </ul>
    </div>
    <div id="subHeaderTabPlayer">
        <ul class="nav nav-pills">
            <li class="active"> <a href="http://myweb.com/">Top</a></li>
            <li><a href="http://myweb.com/rules/" data-toggle="pill">Rules</a></li>
            <li><a href="http://myweb.com/player/" data-toggle="pill">Player</a></li>
            <li><a href="http://myweb.com/categories/" data-toggle="pill">Categories</a></li>
        </ul>
    </div>
</div>

Теперь, если я добавлю атрибуты data-toggle="pill" и data-toggle="tab", вкладка с активным классом изменится на ту, на которую я нажал. Однако href больше не работает. Если я не использую эти классы, href работает, но активный класс не меняется, и он всегда остается тем элементом, который был задан классом при загрузке страницы. 

Я даже пытался использовать jQuery для переключения поведения класса, и это не работает так же хорошо. Мой код скрипта:

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
    $(window).load(function(){
        document.getElementById( 'subHeaderTabPlayer' ).style.display = 'none';
        $('ul.nav-tabs li a').click(function (e) {
            var activeTab= document.getElementByClass('active');
            activeTab.removeAttribute("class");

            $('ul.nav-tabs li.active').removeClass('active')
            $(this).parent('li').addClass('active')
        })
        $('ul.nav-pills li a').click(function (e) {
            $('ul.nav-pills li.active').removeClass('active');
            $(this).parent('li').addClass('active');
        })
        $(".ans-tab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'visible';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'block';
        });
        $(".topTab").click(function() {
            document.getElementById('subHeaderTabPlayer').style.visibility = 'collapse';
            document.getElementById('subHeaderTabPlayer' ).style.display = 'none';
        });
    });
</script>
21
CodeMonkey

Загрузочные вкладки и таблетки работают с плагином JS. Плагин загружается на страницу и отвечает за выделение и запоминание активной на данный момент вкладки или таблетки. Он отключает атрибуты href, если они ссылаются на другие страницы, просто потому, что при нажатии на ссылку на другую страницу загружается новая страница. JS затем перезагружается для этой новой страницы, и он не знает, какая вкладка или таблетка в настоящее время активны. Они предназначены для работы с одностраничными приложениями или ссылками на якоря на одной странице, и они отлично работают для этой цели.

Подход jQuery не работает по той же причине, но может быть проще объяснить.

$('ul.nav-pills li a').click(function (e) {
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

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

Если вы собираетесь перейти на другие страницы, вы можете просто установить активный класс на правой вкладке для конкретной загружаемой страницы.

Если вам действительно нужно сделать это на стороне клиента, вы можете сделать что-то вроде этого и загрузить его на каждую страницу.

$(document).ready(function () {

  // Set BaseURL
  var baseURL = 'http://myweb.com/'

  // Get current URL and replace baseURL
  var href = window.location.href.replace(baseURL, '');

  // Remove trailing slash
  href = href.substr(-1) == '/' ? href.substr(0, href.length - 1) : href;

  // Get last part of current URL
  var page = href.substr(href.lastIndexOf('/') + 1);

  // Add trailing slash if not empty (empty means we're currently at baseURL)
  page = page != '' ? page + '/' : page;

  // Select link based on href attribute and set it's closest 'li' to 'active'. 
  // .siblings('.active').removeClass() is only needed if you have a default 'active li'.
  $('a[href="' + baseURL + page + '"]', '.nav li').closest('li').addClass('active').siblings('.active').removeClass();

});

Он устанавливает активную вкладку на основе последней части URL-адреса, хотя он является специфическим для вашего сценария (и ранее моего сценария). Вам придется адаптировать его, если в него включены расширения файлов или параметры запроса. На каждой странице должна быть хотя бы ссылка на себя. И он предпочтительно имеет тот же заголовок с теми же вкладками и таблетками, что и на всех других страницах.

Оба эти последних пункта снова вызывают у меня мысль: «Если вам нужно так много контролировать то, что именно отображается на странице, вы, вероятно, имеете доступ к серверной части», и если это так, вы можете также исправьте это там, поскольку каждая ссылка в любом случае выполняет новый запрос к серверу. И ваше решение не должно было бы полагаться на не очень надежный JavaScript для работы.

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

Удачи с этим! :)

28
Mathijs Flietstra

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

Как получить Twitter-Bootstrap навигации, чтобы показать активную ссылку?

Ваш код может выглядеть примерно так:

<ul class="nav nav-pills">
  <li class="<%= 'active' if params[:controller] == 'home' %>"> <a href="link" data-toggle="pill">Top</a></li>
  <li class="<%= 'active' if params[:controller] == 'rules' %>"><a href="link" data-toggle="pill">Rules</a></li>
  <li class="<%= 'active' if params[:controller] == 'player' %>"><a href="link" data-toggle="pill">Player</a></li>
  <li class="<%= 'active' if params[:controller] == 'categories' %>"><a href="link" data-toggle="pill">Categories</a></li>
</ul>
3
syeh

Этот пример работал для меня:

$leftBlock.on("click", "#navFinished", function(){
  $('ul.nav-pills li.active').removeClass('active');
  $(this).addClass('active');
});

Пока этот пример не сработал

$leftBlock.on("click", "#navFinished", function(){
  $('ul.nav-pills li.active').removeClass('active')
  $(this).parent('li').addClass('active')
})

Удаление .parent ("li") помогло.

1
user3941146

Я следовал за @syeh решением и понял это правильно. Ниже приведен фрагмент моего кода.

<ul class="nav nav-pills">
   <li <?php if (strchr($this->pageTitle,' Job') === ' Job') echo 'class=active';?>><?php echo CHtml::link('JOBS', array('Job/index'));?></li>
   <li <?php if (strchr($this->pageTitle,'Artisan') === 'Artisan') echo 'class=active';?>><?php echo CHtml::link('ARTISANS', array('Artisan/index'));?></li>
   <li <?php if (strchr($this->pageTitle,'Task') === 'Task') echo 'class=active';?>><?php echo CHtml::link('TASKS',array('Task/index'));?></li>
</ul>
0
user3702201

У меня была похожая проблема: при нажатии вкладки становились активными, но не могли должным образом удалять класс active из других вкладок (т.е. каждая вкладка, которую пользователь щелкнул на просмотре страницы, будет иметь класс active).

Переключение с <ol> на <ul> привело к правильному поведению вкладок.

0
praniclift

Это более обобщенное решение на стороне клиента, использующее jQuery. Это только предполагает, что ваши вкладки имеют атрибут data-toggle и каждая группа вкладок обернута в какой-то элемент контейнера.

$('[data-toggle="tab"],[data-toggle="pill"]').click(function() { 
    $(this).parent().children('.active[data-toggle="tab"],.active[data-toggle="pill"]').removeClass('active'); 
    $(this).addClass('active'); 
});
0
kwcto