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

Posted 2023-05-08

【中文标题】Twitter Bootstrap 选项卡活动类切换不起作用

【英文标题】：Twitter Bootstrap Tabs active class toggle not working

【发布时间】：2013-04-10 22:42:35

【问题描述】：

我正在使用 Twitter 引导导航选项卡和导航药片。这是我的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>

【问题讨论】：

就我而言，问题是我在 之后有一个 div。所以阅读你的帖子帮助我解决了这个问题。

【参考方案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'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 读取它（如果您有这可能会更容易和更健壮）要处理的文件扩展名或查询字符串）。

祝你好运！ :)

【讨论】：

提示在最后一句。 JS 不是存储需要跨多个页面记住的东西的地方。您可以实现一种方法，让您的 JS 接管导航而不是链接，然后将一些值发布到新页面。但是，如果您要在实际页面之间导航，最好让一些服务器端逻辑在将页面发送到客户端之前确定哪个选项卡或药丸将具有active 类。或者，如果它们是静态页面，只需将活动类添加到每个页面的右侧选项卡或药丸。

也许我可以在超链接中发送 get 或 post。在我的页面上检查参数以使课程处于活动状态。对吗？

是的，这可行，但我个人只会采用这种方法，前提是我无法在将服务器端代码或 HTML 发送到客户端之前以任何方式对其进行操作。

我可能会通过更改每个关联页面的模板文件中的类来对此进行尝试。谢谢。但我认为一定已经有办法了。一定有人已经遇到过这个问题。

事实上，我自己曾经遇到过这个问题，然后我自己构建了一个修复程序，然后意识到在服务器端修复它要容易得多。我会在答案中解释我做了什么来解决它，因为你正在推动它:)

【参考方案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>

【参考方案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 属性，并且每组选项卡都包含在某种容器元素中。

$('[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】：

我遇到了类似的问题：单击时，选项卡会变为活动状态，但不会正确地从其他选项卡中删除 active 类（即用户在网页浏览中单击的每个选项卡都将具有 active 类）。

从<ol> 切换到<ul> 使选项卡的行为正常。

【参考方案6】：

我遵循@syeh 解决方案并做对了。下面是我的代码的 sn-p。

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

【参考方案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'); 
?>