引导程序，导航选项卡，下拉菜单；如何基于URI设置活动标签 [英] Bootstrap, nav-tabs, dropdown menus; how to set active tab based on URI
问题描述
我将Bootstrap导航选项卡/下拉菜单组件用作主要导航栏，但是我无法弄清楚如何根据传入的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.
网络上有很多不同的示例/帖子，它们使用nav-tabs隐藏和显示特定的div内容或使用#符号，但是我只想使用PHP读取传入的URI，即_SERVER ["REQUEST_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.
这是我一直在尝试的:
<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
有人能为我指出如何完成此任务的一个很好的例子吗?或者我只是对这个组件提出了太多要求?
Can anyone point me to a good example of how to accomplish this or am I just asking too much from this component?
注意:我已经在标头中预加载了所有引导程序和jquery资源.
NOTE: I've preloaded all the bootstrap and jquery resources in my header.
推荐答案
我已经解决了自己的问题，这是对目标及其实现目标的概述.
I've solved my own problem, here is a recap of the goal and what it took to accomplish.
目标:
- 我想使用引导 nav-tabs 组件进行导航 酒吧，因为我更喜欢它的外观/感觉.
- 我希望能够通过解析 传入的URI.
- 我希望子导航也能正常工作.
- I wanted to use the bootstrap nav-tabs component 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.
基于第一篇文章的新代码:
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>
注意上面的代码中没有
class =活动"
class="active"
或
data-toggle =标签"
data-toggle="tab"
设置在任何地方.
因为我想在一个静态模板上导航，该模板用作所有模板的头，所以我无法基于传入的URI添加任何动态生成的代码，但事实证明这不是必需的.
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.
我在访客调用的每个模板的底部添加了以下Javascript代码，以帮助告知导航列表哪些项目被标记为有效".
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'.
我在/page1.html底部使用了此脚本
I used this script at the bottom of my /page1.html
<script type="text/javascript">
window.onload=function () {
$('#page1').addClass('active');
};
</script>
要将/page3.2.2.html设置为活动页面以及它上面的所有导航lvls，我做到了
To set /page3.2.2.html as the active page and all the nav lvls above it I did this
<script type="text/javascript">
window.onload=function () {
$('#page3').addClass('active');
$('#page3_2').addClass('active');
$('#page3_2_2').addClass('active');
};
</script>
现在，当用户进入我的网站时，导航将从静态文件加载，页面的其余部分包含动态JavaScript，这些JavaScript设置了我希望激活的组件.
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.
我还发现有必要对自定义CSS进行一下修改，以确保在活动"标签下没有任何行出现，只是由于我的字体设置可能需要视觉上的修饰.
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.
.nav-tabs > li { margin-bottom: -3px; }
我会发布一些SS，但是我的"rep"还没有超过10，哈哈哈.希望这会对其他人有所帮助，当Bootstrap的第3版发布时，上帝会帮助我们所有人，我们必须再次弄清楚这一切. 8 ^)P
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
这篇关于引导程序，导航选项卡，下拉菜单；如何基于URI设置活动标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
