23

我正在使用 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>
4

7 回答 7

29

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 读取它（如果你有文件扩展名或要处理的查询字符串）。

祝你好运！:)

于 2013-04-18T00:23:21.933 回答
3

需要考虑的事项：如果每个 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>
于 2013-09-01T03:47:46.397 回答
1

这个例子对我有用：

$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") 有帮助。

于 2014-08-15T09:08:59.003 回答
0

这是一个使用 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'); 
});
于 2014-07-15T06:16:04.493 回答
0

我按照@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>
于 2014-12-03T14:18:55.523 回答
0

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

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

于 2015-06-11T15:35:08.567 回答
-1 
<?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'); 
?>
于 2015-07-02T22:24:06.087 回答