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

有人能指出我如何实现这一目标的一个很好的例子，或者我只是从这个组件中提出太多要求？

注意：我已经预加载了标题中的所有bootstrap和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的绝对路径，但可以通过以下方式轻松覆盖：

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

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

目标：

我想使用bootstrap nav-tabs组件进行导航吧，因为我更喜欢它的外观/感觉。
我希望能够通过解析来设置'active'类传入的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>

请注意，上面的代码中没有

类= “活性”

或

数据肘节= “标签”

随处设置。

因为我想在一个用作所有模板标题的静态模板上创建导航，所以我无法根据传入的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激活标签：

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

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

如果您的目标是显示特定标签以响应请求。只需将＆＃39;有效＆＃39; 类添加到包装的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

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

6 个答案:

使用Bootstrap 4