5

我正在使用 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 资源。

4

6 回答 6

6

我参加聚会有点晚了，但刚刚看到这篇文章，我想我会多加 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');

  });

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

干杯!

于 2014-03-29T01:54:06.367 回答
5

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

目标：

  1. 我想为导航栏使用引导导航选项卡组件，因为我更喜欢它的外观/感觉。
  2. 我希望能够通过解析传入的 URI 来设置“活动”类。
  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 设置为活动页面及其上方的所有导航 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，但我的“代表”还没有超过 10，哈哈哈。希望这对其他人有所帮助，当引导程序的第 3 版问世时，上帝会帮助我们所有人，我们必须再次弄清楚这一切。8^)P

于 2013-06-20T09:09:02.650 回答
2

Tab is set active on the client-side, not on the server. This is because, usually all the contents of each tab are actually there already in the document on page load. Clicking on a tab simple hides one tab and then shows the tab having the id which the anchor element links to.

Here's what the simplest implementation of Bootstrap's tab looks like:

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

That's not all, you still need to activate tabbing using JS like this:

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

Based on how your question is constructed, I think you should go have a better look at what each Bootstrap component stands for, and try to understand what are their appropriate use-case.

If your aim was to show a specific tab in response to a request. Simply add the 'active' class to the div element that wraps its content.

And then make it show by doing this:

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

Note: all you have to do is add active in the right place each time.

For you case specifically, the problem is in your jQuery. Here's the correct way to write it:

$('#supernav active').tab('show');
于 2013-06-19T22:37:50.670 回答
1

我遇到了类似的问题，而我的页面网址很少，例如：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');
    });

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

于 2015-10-11T07:28:43.820 回答
0

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

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

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

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

希望有帮助。

于 2013-06-19T20:16:22.117 回答
0

使用引导程序 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

于 2017-08-13T08:09:05.847 回答