我使用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
有没有人能给我一个很好的例子来说明如何完成这个任务，或者我只是对这个组件要求太多了?
注意:我已经在header中预加载了所有的bootstrap和jquery资源。
我来晚了一点，但刚刚看到这篇文章，我想我应该多加一点……
基本上，我发现最好的方法来设置活动引导的标签/药丸是通过使用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');
});
希望这对宇宙中的某些人有所帮助!:)
干杯!
我已经解决了我自己的问题，这里是目标的概述和完成的步骤。
目标:
- 我想使用bootstrap nav-tabs组件进行导航因为我更喜欢它的外观/感觉。
- 我希望能够通过解析类来设置"活动"类传入的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>
class = "活跃"
或
data-toggle = "标签"
设置。
因为我想让我的导航在一个静态模板上，它被用作所有模板的头，我不能添加任何基于传入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; }
选项卡是在客户端激活的，而不是在服务器端。这是因为，通常每个选项卡的所有内容实际上已经在页面加载时存在于文档中。单击简单的选项卡隐藏一个选项卡，然后显示具有锚元素链接到的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组件代表什么，并尝试理解它们合适的用例是什么。
如果您的目标是在响应请求时显示特定的选项卡。只需将'active'类添加到包装其内容的div元素中。
然后通过以下方式显示:
$('tab-pane active').tab('show');
注意:你所要做的就是每次在正确的位置添加active。
对于您的具体情况，问题在于您的jQuery。正确的写法是:
$('#supernav active').tab('show');
我面临着类似的问题，而我有几个页面url，如: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');
});
可能有人还在寻找这个解决方案，就像我一样:)
使用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/
希望有帮助。
Using 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')
文档:http://v4-alpha.getbootstrap.com/components/navs/via-javascript