Bootstrap，nav-tabs，下拉菜单; 如何基于URI设置活动选项卡

Question

我正在使用Bootstrap nav-tabs /下拉菜单组件作为我的主导航栏，但我无法弄清楚如何根据传入的URI设置活动菜单。

网上有很多不同的例子/帖子，使用nav-tabs隐藏和显示特定的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资源。

Answer 1

我参加派对有点晚了，但刚刚发现这篇帖子，我想我还要加2美分......

基本上，我发现设置活动bootstrap的tab / pill的最好方法是使用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的absoulte路径，但可以通过以下方式轻松覆盖：

$(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');

  });

希望这有助于宇宙中的某个人！ :)

干杯!

Answer 2

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

目标：

1. 我想在我的导航栏中使用bootstrap nav-tabs组件，因为我更喜欢它的外观/感觉。
2. 我希望能够通过解析传入的URI来设置'active'类。
3. 我也想让子导航工作。

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

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

请注意上面的代码中没有

类=“活性”

要么

数据肘节=“标签”

随处设置。

因为我想在一个用作所有模板标题的静态模板上创建导航，所以我无法根据传入的URI添加任何动态生成的代码，但结果证明没有必要。

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

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

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

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

<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，但我的'代表'还没有超过10，哈哈哈。 希望这有助于其他人，当引导程序的第3版出现时，上帝帮助我们所有人，我们必须再次弄清楚这一点。 8 ^）p

Answer 3

Tab在客户端设置为活动，而不是在服务器上。 这是因为，通常每个选项卡的所有内容实际上都存在于页面加载的文档中。 单击选项卡简单隐藏一个选项卡，然后显示具有锚元素链接到的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激活tabbing，如下所示：

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

根据您的问题的构建方式，我认为您应该更好地了解每个Bootstrap组件的含义，并尝试了解它们的适当用例。

如果您的目的是显示响应请求的特定选项卡。 只需将'active'类添加到包含其内容的div元素即可。

然后通过这样做来显示：

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

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

特别是对于你的情况，问题出在你的jQuery中。 这是写它的正确方法：

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

Answer 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');
    });

可能有人仍在寻找像我这样的解决方案:)

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

希望有所帮助。

Answer 6

使用Bootstrap 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')

Doc： http ： //v4-alpha.getbootstrap.com/components/navs/#via-javascript