Подтвердить что ты не робот

Twitter Bootstrap Tabs активный класс переключается не работает

Я использую закладки Twitter и загрузочные талоны Twitter. Это мой html-код:

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

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

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

<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>
4b9b3361

ОТВЕТЫ

Ответ 1

Загрузочные вкладки и пиктограммы Bootstrap работают с 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 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 там (что, вероятно, было бы проще и надежнее, если бы вы расширений файлов или строк запросов для обработки).

Удачи вам!:)

Ответ 2

Что-то, что нужно учитывать: если каждый элемент 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

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

$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" ).

Ответ 4

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

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

Ответ 5

Я последовал за решением @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>

Ответ 6

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

Переключение с <ol> на a <ul> заставило вкладки правильно вести себя.

Ответ 7

<?php
function activate($uri) {
    if ($_SERVER['REQUEST_URI'] == $uri) {
        echo ' class="active" ';
    }
}

?>

<nav>
    <ul class="nav nav-tabs">
      <li role="tab" <?php activate('/wikireport/index.php'); ?> ><a href="index.php" aria-controls="Home">Wiki Report</a></li>
      <li role="tab" <?php activate('/wikireport/examples.php'); ?> ><a href="examples.php" aria-controls="Examples">Examples</a></li>
      <li role="tab" <?php activate('/wikireport/about.php'); ?> ><a href="about.php" aria-controls="About">About</a></li>
    </ul>
</nav>

И затем в файле "content" просто укажите/включите свой navline.php

<?php 
include('navline.php'); 
?>