php Bootstrap、导航标签、下拉菜单；如何根据 URI 设置活动选项卡

Question

提问by Vince

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 导航选项卡/下拉菜单组件作为我的主要导航栏，但我无法弄清楚如何根据传入的 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. Be it a nested location in the navigation or not is also a problem.

网络上有很多不同的示例/帖子使用导航选项卡来隐藏和显示特定的 div 内容或使用 # 符号，但我只想使用 PHP 读取传入的 URI，即 _SERVER["REQUEST_URI"] 变量并设置一个选项卡处于活动状态。是否是导航中的嵌套位置也是一个问题。

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 资源。

Answer 1

采纳答案by Vince

I've solved my own problem, here is a recap of the goal and what it took to accomplish.

我已经解决了我自己的问题，这里是目标和完成所需的内容的概述。

Goals:

目标：

I wanted to use the bootstrap nav-tabscomponent for my navigation bar because I liked the look/feel of it better.
I wanted to be able to set the 'active' class by parsing the incoming URI.
I wanted sub-navigation to work as well.

我想为我的导航栏使用 bootstrap nav-tabs组件，因为我更喜欢它的外观/感觉。
我希望能够通过解析传入的 URI 来设置“活动”类。
我希望子导航也能正常工作。

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. 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. 8^)P

我会发布一些 SS，但我的“代表”还没有超过 10，哈哈哈。希望这能帮助其他人，当 bootstrap 版本 3 出现时，上帝帮助我们所有人，我们必须再次弄清楚这一切。8^)P

Answer 2

回答by dev7

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.

基本上，我发现设置活动引导程序选项卡/药丸的最佳方法是使用 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 绝对路径，但这可以很容易地被以下内容覆盖：

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

干杯!

Answer 3

回答by Igwe Kalu

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 hidesone tab and then showsthe tab having the id which the anchor element links to.

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

$('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. Here's the correct way to write it:

对于您的情况，问题出在您的 jQuery 中。正确的写法如下：

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

Answer 4

回答by Gouranga Tarafder

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

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

Answer 5

回答by Chloe

Using Bootstrap 4

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

文档：http: //v4-alpha.getbootstrap.com/components/navs/#via-javascript

Answer 6

回答by devfunkd

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

使用 PHP 设置活动不是理想的方式，因为 PHP 是服务器端代码，而引导程序是客户端 UI。我最近有一个使用 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. Check out this article on how to do just that. http://css-tricks.com/snippets/javascript/get-url-and-url-parts-in-javascript/

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

Hope that helps.

希望有帮助。

php Bootstrap、导航标签、下拉菜单；如何根据 URI 设置活动选项卡

提问by Vince

采纳答案by Vince

回答by dev7

回答by Igwe Kalu

回答by Gouranga Tarafder

回答by Chloe

Using Bootstrap 4

使用引导程序 4

回答by devfunkd

相关推荐

最近更新

标签

php Bootstrap、导航标签、下拉菜单；如何根据 URI 设置活动选项卡

提问by Vince

采纳答案by Vince

回答by dev7

回答by Igwe Kalu

回答by Gouranga Tarafder

回答by Chloe

Using Bootstrap 4

使用引导程序 4

回答by devfunkd

相关推荐

php 即使upload_max_size 大于文件大小，$_FILE 上传大文件也会出现错误1

php Wamp 服务器不会变成绿色

php 如何将html存储在mysql数据库中

php 从命令行更新 Composer 依赖项

相关推荐

最近更新

标签