简体   繁体   English

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

[英]Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI

I'm using Bootstrap nav-tabs/dropdown menus component as my primary navigation bar but I cant figure out how to set the active menu based on an incoming URI. 我正在使用Bootstrap nav-tabs /下拉菜单组件作为我的主导航栏,但我无法弄清楚如何根据传入的URI设置活动菜单。

There are a lot of different examples/posts on the net that use nav-tabs for hiding and displaying specific div content or working with the # symbol but I just want to read the incoming URI using PHP, the _SERVER["REQUEST_URI"] variable and set a tab active. 网上有很多不同的例子/帖子,使用nav-tabs隐藏和显示特定的div内容或使用#符号,但我只想用PHP读取传入的URI,_SERVER [“REQUEST_URI”]变量并设置一个活动标签。 Be it a nested location in the navigation or not is also a problem. 无论是导航中的嵌套位置还是不是也是一个问题。

Here what I've been trying: 这是我一直在尝试的:

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

Here are a couple URI examples: 以下是几个URI示例:

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

Can anyone point me to a good example of how to accomplish this or am I just asking too much from this component? 任何人都能指出我如何实现这一目标的一个很好的例子,或者我只是从这个组件中提出太多要求?

NOTE: I've preloaded all the bootstrap and jquery resources in my header. 注意:我已经预加载了标头中的所有引导程序和jquery资源。

I'm a little late to the party but just came across this post and I figured I'd add my extra 2 cents... 我参加派对有点晚了,但刚刚发现这篇帖子,我想我还要加2美分......

Basically, the best method I've found to set the active bootstrap's tab/pill is by using Javascript/jQuery to match the current url to the href of the active link. 基本上,我发现设置活动bootstrap的tab / pill的最好方法是使用Javascript / jQuery将当前url与活动链接的href相匹配。

So if your menu is set up as the following: 因此,如果您的菜单设置如下:

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

Your jQuery will be: 你的jQuery将是:

$(document).ready(function() {

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

});

This assumes absoulte path for the link's href, but that could be easily overriden by something like: 这假定链接的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');

  });

Hope this helps somebody in the universe! 希望这有助于宇宙中的某个人! :) :)

Cheers! 干杯!

I've solved my own problem, here is a recap of the goal and what it took to accomplish. 我已经解决了我自己的问题,这是对目标的回顾以及它需要完成的工作。

Goals: 目标:

  1. I wanted to use the bootstrap nav-tabs component for my navigation bar because I liked the look/feel of it better. 我想在我的导航栏中使用bootstrap nav-tabs组件,因为我更喜欢它的外观/感觉。
  2. I wanted to be able to set the 'active' class by parsing the incoming URI. 我希望能够通过解析传入的URI来设置'active'类。
  3. I wanted sub-navigation to work as well. 我也想让子导航工作。

New code based on first post: 基于第一篇文章的新代码:

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

Notice in the code above that there are no 请注意上面的代码中没有

class="active" 类=“活性”

or 要么

data-toggle="tab" 数据肘节=“标签”

set anywhere. 随处设置。

Because I wanted to make my nav on a static template which is used as a header for all templates I couldn't add any dynamically generated code based on incoming URI's but it turns out not to be necessary. 因为我想在一个用作所有模板标题的静态模板上创建导航,所以我无法根据传入的URI添加任何动态生成的代码,但结果证明没有必要。

I added the following Javascript code to bottom of each template a visitor calls to help tell the nav-list which items to be marked as 'active'. 我将以下Javascript代码添加到访问者调用的每个模板的底部,以帮助告知导航列表哪些项目被标记为“活动”。

I used this script at the bottom of my /page1.html 我在/page1.html的底部使用了这个脚本

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

To set /page3.2.2.html as the active page and all the nav lvls above it I did this 要将/page3.2.2.html设置为活动页面以及上面的所有导航页面,我就这样做了

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

Now when a user comes to my site the nav gets loaded from a static file and the rest of the page contains the dynamic JavaScript that sets what components I want set active. 现在,当用户访问我的站点时,导航将从静态文件加载,页面的其余部分包含动态JavaScript,用于设置我想要设置活动的组件。

I also found it necessary to make this one little modification to my custom css in order to make sure no line appeared under my 'active' tab, just a visual thing probably needed because of my font settings. 我还发现有必要对我的自定义css进行一点修改,以确保在我的“活动”选项卡下没有出现任何行,因为我的字体设置可能只需要一个视觉效果。

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

I would have posted some SS's but my 'rep' isn't above 10 yet, ha ha ha. 我会发布一些SS,但我的'代表'还没有超过10,哈哈哈。 Hopefully this helps someone else, god help us all when version 3 of bootstrap comes out and we have to figure this all out again. 希望这有助于其他人,当引导程序的第3版出现时,上帝帮助我们所有人,我们必须再次弄清楚这一点。 8^)P 8 ^)p

Tab is set active on the client-side, not on the server. Tab在客户端设置为活动,而不是在服务器上。 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. 单击选项卡简单隐藏一个选项卡,然后显示具有锚元素链接到的id的选项卡。

Here's what the simplest implementation of Bootstrap's tab looks like: 以下是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>

That's not all, you still need to activate tabbing using JS like this: 这不是全部,你仍然需要使用JS激活tabbing,如下所示:

$('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. 根据您的问题的构建方式,我认为您应该更好地了解每个Bootstrap组件的含义,并尝试了解它们的适当用例。

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. 只需将'active'类添加到包含其内容的div元素即可。

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. 特别是对于你的情况,问题出在你的jQuery中。 Here's the correct way to write it: 这是写它的正确方法:

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

I was facing similar problem while I had few page urls like : www.somedomain.com/pages/xyz/abc/samplepage.html 当我有几个页面网址时,我遇到了类似的问题:www.somedomain.com/pages/xyz/abc/samplepage.html

This code worked in my case like magic. 这个代码在我的情况下像魔术一样工作。

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

May be someone is still looking for this solution just like me :) 可能有人仍在寻找像我这样的解决方案:)

Using PHP to set the active isn't the ideal way as PHP is server-side code and the bootstrap is a client-side UI. 使用PHP设置活动不是理想的方式,因为PHP是服务器端代码,而引导程序是客户端UI。 I recently had a project using bootstrap and found the same issue quite annoying given how powerful bootstrap is and truly hope they fix this in the upcoming 3.0 release. 我最近有一个使用bootstrap的项目,发现同样的问题非常烦人,因为有多强大的bootstrap是真的希望他们在即将发布的3.0版本中解决这个问题。

The way I fixed it was to use jquery to reference a unique id on the link tag and update the active tab value based on that. 我修复它的方法是使用jquery引用链接标记上的唯一ID,并根据该值更新活动选项卡值。

So really all the jquery did was remove the active class and assign it to the current clicked link. 所以jquery所做的就是删除活动类并将其分配给当前单击的链接。

If you still want to use the URL path than I'd suggest you use javascript/jquery over PHP. 如果你仍然想使用URL路径而不是我建议使用javascript / jquery而不是PHP。 Check out this article on how to do just that. 查看这篇文章,了解如何做到这一点。 http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/ http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

Hope that helps. 希望有所帮助。

Using Bootstrap 4 使用Bootstrap 4

Given (HAML) 鉴于(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

This is reduced to (Coffeescript) 这减少为(Coffeescript)

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

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM