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

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

注意:我已经预加载了标头中的所有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的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