带有活动选项卡的动态引导导航
Posted
技术标签:
【中文标题】带有活动选项卡的动态引导导航【英文标题】:Dynamic Bootstrap navigation with active tab 【发布时间】:2016-10-22 15:39:48 【问题描述】:我已经在 Bootstrap 3.3.6 上创建了我的项目,现在每当我点击任何将按原样重置的菜单时都会遇到导航问题,但我想将其设置为活动选项卡。侧边栏也会出现同样的问题。我该如何解决?
谢谢
<ul class="sidebar-menu">
<li class="header">HEADER</li>
<!-- Optionally, you can add icons to the links -->
<li class="active"><a href="index.php"><i class="fa fa-dashboard"></i> <span>Dashboard</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-book"></i> <span>Admin</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="setting.php"><i class="fa fa-circle-o"></i> Setting</a></li>
<li><a href="adduser.php"><i class="fa fa-circle-o"></i> Add User</a></li>
<li><a href="users.php"><i class="fa fa-circle-o"></i> Users</a></li>
</ul>
</li>
</ul>
【问题讨论】:
【参考方案1】:您可以通过在标签的点击事件中编写这行代码来激活标签
$(this).addClass("active");
这里你可以找到例子
http://www.bootply.com/70331#
【讨论】:
是的,如果您没有在点击时重新加载页面,它会起作用。我认为,在这里,这会有所帮助bootstrap-3-keep-selected-tab-on-page-refresh【参考方案2】:有两种方法。
首先(如果您的网站是静态的)
只需将每个页面上的静态类更改为“活动”即可。
如果您有三个菜单 - 一、二、三,那么您将在随后打开的所有三个页面上设置 class="active"
。
说一个你有one.html
两个你有two.html
然后你必须根据菜单页面添加类并从最后一页元素中删除类。
第二个(通过 jQuery)
$(document).ready(function ()
$("PreviousElementName").removeClass("active");//removes last manu item class
$('CurrentElement').addClass('active'); // adds new menu item class
);
【讨论】:
以上是关于带有活动选项卡的动态引导导航的主要内容,如果未能解决你的问题,请参考以下文章