Question

我正在使用Twitter bootstrap导航标签和导航丸。这是我的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>

Answer 1

Bootstrap导航选项卡和补丁使用JS插件。该插件加载在页面上，负责突出显示和记住当前活动的选项卡或药丸。如果它们链接到其他页面，它会禁用href属性，因为当您单击指向另一个页面的链接时，将加载新页面。然后为这个新页面重新加载JS，它不知道哪个tab或pill当前是活动的。它们旨在与单页应用程序或同一页面上的锚点链接一起使用，并且它们可以正常工作。

jQuery方法失败的原因相同，但可能更容易解释。

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

点击链接，JS关闭并更改类，只有在加载下一页之前有足够的时间才能这样做，因为链接上的href属性告诉浏览器导航，所以加载了下一页到一个新的页面。新页面再次加载你的JS，它不可能记住上一页中的变量，比如哪个tab或pill是活跃的。

如果您要导航到其他页面，您也可以在右侧选项卡上为正在加载的特定页面设置活动类。

如果您确实需要在客户端执行此操作，则可以执行此类操作，并将其加载到每个页面上。

$(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读取（如果你有的话，可能会更容易和更强大要处理的文件扩展名或查询字符串。）

祝你好运！：）

Answer 2

需要考虑的事项：如果每个li元素使用不同的控制器，那么您可以尝试使用。

How to get Twitter-Bootstrap navigation to show active link?

您的代码可能如下所示：

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

Answer 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（＆＃34; li＆＃34;）帮助。

Answer 4

这是一个使用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'); 
});

Answer 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>

Answer 6

我遇到了类似的问题：点击后，标签会变为有效状态，但无法从其他标签中正确删除active课程（即，用户在网页浏览中点击的每个标签都会显示active类）。

从<ol>切换到<ul>会使标签行为正常。

Answer 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>

然后在“内容”文件中，只需要/包含你的navline.php

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

Twitter Bootstrap选项卡活动类切换不起作用

7 个答案: