引导、导航选项卡、下拉菜单；如何根据 URI 设置活动选项卡答案

【问题标题】：Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI引导、导航选项卡、下拉菜单；如何根据 URI 设置活动选项卡
【发布时间】：2013-06-16 12:10:17
【问题描述】：

我使用 Bootstrap 导航选项卡/下拉菜单组件作为我的主要导航栏，但我不知道如何根据传入的 URI 设置活动菜单。

网上有很多不同的示例/帖子使用导航选项卡来隐藏和显示特定的 div 内容或使用 # 符号，但我只想使用 PHP 读取传入的 URI，_SERVER["REQUEST_URI "] 变量并设置一个选项卡处于活动状态。是否是导航中的嵌套位置也是一个问题。

这是我一直在尝试的：

<ul class="nav nav-tabs" id="supernav">
    <li class="active"><a href="/page1.html" data-toggle="tab"><i class="icon-home" style="margin-top:4px;"></i> Page 1</a></li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page2.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li><a href="/page2.2.html" data-toggle="tab">Page 2.2</a></li>
            <li><a href="/page2.3.html" data-toggle="tab">Page 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="/page3.html" data-toggle="tab">Home</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu">
                <a href="/page3.2.html" data-toggle="tab">Page 3.2</a>
                <ul class="dropdown-menu">
                    <li><a href="/page3.2.1.html" data-toggle="tab">Page 3.2.1</a></li>
                    <li><a href="/page3.2.2.html" data-toggle="tab">Page 3.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="/page4.html" data-toggle="tab">Page 4</a></li>
</ul>

<script>
window.onload=function (e) {
    e.preventDefault();
    $('#supernav a[href="<?=$_SERVER["REQUEST_URI"];?>"]').tab('show');
};
</script>

这里有几个 URI 示例：

http://abc.com/page1.html
http://abc.com/page2.3.html
http://abc.com/page3.2.2.html

谁能给我一个很好的例子来说明如何实现这一点，或者我只是对这个组件要求太多了吗？

注意：我已在标题中预加载了所有引导程序和 jquery 资源。

【问题讨论】：

这里是你应该做的更正：$('#supernav active').tab('show');看看我的答案，似乎是对 Bootstrap 选项卡组件的解释。

标签： php twitter-bootstrap uri nav

【解决方案1】：

我参加聚会有点晚了，但刚刚看到这篇文章，我想我会多加 2 美分...

基本上，我发现设置活动引导程序的选项卡/药丸的最佳方法是使用 Javascript/jQuery 将当前 url 与活动链接的 href 匹配。

所以如果你的菜单设置如下：

<ul class="nav nav-tabs">
    <li><a href="/page1.html" data-toggle="tab">Page 1</a></li>
    <li><a href="/page2.html" data-toggle="tab">Page 2</a></li>
</ul>

你的 jQuery 将是：

$(document).ready(function() {

    $('.nav-tabs a[href="'+location.href+'"]').parents('li').addClass('active');

});

这假定链接的 href 的绝对路径，但可以很容易地被以下内容覆盖：

$(document).ready(function() {

    var url_parts = location.href.split('/');

    var last_segment = url_parts[url_parts.length-1];

    $('.nav-tabs a[href="' + last_segment + '"]').parents('li').addClass('active');

  });

希望这可以帮助宇宙中的某个人！ :)

干杯！

【讨论】：

【解决方案2】：

我已经解决了我自己的问题，这里是对目标的回顾以及它需要完成的工作。

目标：

我想使用引导程序nav-tabs 组件进行导航吧，因为我更喜欢它的外观/感觉。
我希望能够通过解析传入的 URI。
我希望子导航也能正常工作。

基于第一篇文章的新代码：

<ul class="nav nav-tabs" id="supernav">
    <li id="page1"><a href="/page1.html"><i class="icon-home" style="margin-top:4px;"></i> Page 1</a></li>
    <li class="dropdown" id="page2">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 2 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li id="page2_home"><a href="/page2.html">Home</a></li>
            <li class="divider"></li>
            <li id="page2_2"><a href="/page2.2.html">Page 2.2</a></li>
            <li id="page2_3"><a href="/page2.3.html">Page 2.3</a></li>
        </ul>
    </li>
    <li class="dropdown" id="page3">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Page 3 <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li id="page3_home"><a href="/page3.html">Home</a></li>
            <li class="divider"></li>
            <li class="dropdown-submenu" id="page3_2">
                <a href="/page3.2.html">Page 3.2</a>
                <ul class="dropdown-menu">
                    <li id="page3_2_1"><a href="/page3.2.1.html">Page 3.2.1</a></li>
                    <li id="page3_2_2"><a href="/page3.2.2.html">Page 3.2.2</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li id="page4"><a href="/page4.html">Page 4</a></li>
</ul>

注意上面的代码中没有

class="活跃"

或

data-toggle="tab"

设置在任何地方。

因为我想在一个用作所有模板标题的静态模板上创建导航，所以我无法添加任何基于传入 URI 动态生成的代码，但事实证明这不是必需的。

我将以下 Javascript 代码添加到访问者调用的每个模板的底部，以帮助告诉导航列表哪些项目被标记为“活动”。

我在 /page1.html 的底部使用了这个脚本

<script type="text/javascript">
window.onload=function () {
    $('#page1').addClass('active');
};
</script>

为了将 /page3.2.2.html 设置为活动页面及其上方的所有导航 lvls，我这样做了

<script type="text/javascript">
window.onload=function () {
    $('#page3').addClass('active');
    $('#page3_2').addClass('active');
    $('#page3_2_2').addClass('active');
};
</script>

现在，当用户访问我的网站时，导航会从静态文件中加载，页面的其余部分包含动态 JavaScript，用于设置我想要激活的组件。

我还发现有必要对我的自定义 css 进行一点修改，以确保在我的“活动”选项卡下没有出现任何线条，这可能只是由于我的字体设置而需要的视觉效果。

.nav-tabs > li { margin-bottom: -3px; }

我会发布一些 SS，但我的 'rep' 还没有超过 10，哈哈哈。希望这对其他人有所帮助，当引导程序的第 3 版问世时，上帝会帮助我们所有人，我们必须再次弄清楚这一切。 8^)P

【讨论】：

我遇到了类似的问题，您的 JS 在 Bootstrap 3.2.0 上仍然运行良好。一个伟大的，简单的解决方案。谢谢。

【解决方案3】：

选项卡在客户端设置为活动状态，而不是在服务器上。这是因为，通常每个选项卡的所有内容实际上已经存在于页面加载的文档中。点击一个简单的标签隐藏一个标签，然后显示具有锚元素链接到的 id 的标签。

Bootstrap 选项卡的最简单实现如下所示：

<!-- tab navigation -->
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#tab1">Home</a>
    </li>
    <li><a href="#tab2">...</a></li>
    <li><a href="#tab3">...</a></li>
</ul>

<!-- tab contents are inside -->
<div class="tab-content">
    <!-- content of each tab is put inside a tab-pane or tab-pill -->
    <div class="tab-pane active" id="tab1">
        <p>content of tab 1</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 2</p>
    </div>
    <div class="tab-pane" id="tab2">
        <p>content of tab 3</p>
    </div>
</div>

这还不是全部，你还需要像这样使用 JS 来激活标签：

$('ul.nav.nav-tabs > li > a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
});

根据您的问题是如何构建的，我认为您应该更好地了解每个 Bootstrap 组件代表什么，并尝试了解它们的适当用例。

如果您的目标是显示特定标签以响应请求。只需将 'active' 类添加到包装其内容的 div 元素中。 p>

然后通过这样做使其显示：

$('tab-pane active').tab('show');

注意：您所要做的就是每次在正确的位置添加活动。

对于您的具体情况，问题出在您的 jQuery 中。下面是正确的写法：

$('#supernav active').tab('show');

【讨论】：

感谢您的帮助 lGwe，但我认为您不明白我在这里真正想要的是什么。我说“我正在使用 Bootstrap 导航选项卡/下拉菜单组件作为我的主要导航栏”。不是作为导航栏来显示通过单击它们出现和消失的单个内容组。当我进入网站中的特定页面时，我只是希望我的导航通过将其中的选项卡或子选项卡设置为活动位置来反映该位置。
我将我在标题中使用的 html/php 代码分离到一个单独的模板中，以使我的网站更高效地编写，因此其中的标题数据将保持静态，并且必须受到其他一些影响从外部发出的呼叫。加载 jquery 和 bootstrap js 文件后，可能在页脚的某个位置。
@Vince，你可能是对的，我不明白你的问题。稍后我会再次阅读您的问题，并可能提供不同的解决方案（如果到那时还没有解决）。

【解决方案4】：

当我有几个页面网址时，我遇到了类似的问题：www.somedomain.com/pages/xyz/abc/samplepage.html

这段代码在我的情况下就像魔术一样工作。

    $(document).ready(function() {
        var permalink_nodomain = window.location.pathname;
        $('.nav-tabs a[href="' + permalink_nodomain + '"]').parents('li').addClass('active');
    });

可能有人和我一样还在寻找这个解决方案:)

【讨论】：

【解决方案5】：

使用 PHP 设置活动不是理想的方式，因为 PHP 是服务器端代码，而引导程序是客户端 UI。我最近有一个使用 bootstrap 的项目，但考虑到 bootstrap 的强大功能，我发现同样的问题非常烦人，我真心希望他们能在即将发布的 3.0 版本中解决这个问题。

我修复它的方法是使用 jquery 引用链接标签上的唯一 id 并基于此更新活动选项卡值。

所以实际上所有 jquery 所做的只是删除活动类并将其分配给当前单击的链接。

如果您仍想使用 URL 路径，我建议您使用 javascript/jquery 而不是 PHP。查看这篇文章，了解如何做到这一点。 http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

希望对您有所帮助。

【讨论】：

【解决方案6】：

使用引导程序 4

给定（HAML）

%nav.nav.nav-pills.flex-column
  %a.nav-link.active{href: '#users', 'data-toggle'=>'pill', role: 'tab'} Users
  %a.nav-link{href: '#deals', 'data-toggle'=>'pill', role: 'tab'} Deals
  %a.nav-link{href: '#facilitators', 'data-toggle'=>'pill', role: 'tab'} Facilitators

这被简化为 (Coffeescript)

if location.hash
  $('nav.nav-pills a[href="'+location.hash+'"]').tab('show')

文档：http://v4-alpha.getbootstrap.com/components/navs/#via-javascript

【讨论】：