如何从twitter bootstrap将活动类设置为导航菜单
我是twitter新手的新手。 在那里使用导航菜单 。 我正在尝试将活动类设置为所选菜单。 我的菜单是 –
谷歌搜索后我尝试了跟随的事情，我必须从菜单中设置每个页面上的活动类，如as–
$(document).ready(function () { $('#home').addClass('active'); });
但上面的问题是我设置了默认选择的主菜单。 然后它总是被选中。 有没有其他方法可以做到这一点？ ，或者我可以概括并保持我的js在布局文件本身？
执行应用程序后，我的菜单显示 
点击其他菜单项后，我得到以下结果 – 
我在Index视图和Broker视图中添加了以下脚本—
$(document).ready(function () { $('#home').addClass('active'); }); $(document).ready(function () { $('#broker').addClass('active'); });
分别。
这是一种解决方法。 尝试
并在每个页面js添加
$(document).ready(function () { $(".nav li").removeClass("active");//this will remove the active class from //previously active menu item $('#home').addClass('active'); //for demo //$('#demo').addClass('active'); //for sale //$('#sale').addClass('active'); });
您可以使用此JavaScript\jQuery代码：
// Sets active link in Bootstrap menu // Add this code in a central place used\shared by all pages // like your _Layout.cshtml in ASP.NET MVC for example $('a[href="' + this.location.pathname + '"]').parents('li,ul').addClass('active');
和
的父
为活动状态。
有效的简单解决方案！
原始来源：
Bootstrap将活动类添加到li
我有同样的问题…通过将下面显示的代码添加到我的“functions.js”文件的“$（document）.ready”部分来解决它，该文件包含在每个页脚中。 这很简单。 它获取显示页面的完整当前URL，并将其与完整的锚点href URL进行比较。 如果它们相同，则将anchor（li）parent设置为活动状态。 并且仅当锚点href值不是“＃”时才这样做，然后引导程序将解决它。
$(document).ready(function () { $(function(){ var current_page_URL = location.href; $( "a" ).each(function() { if ($(this).attr("href") !== "#") { var target_URL = $(this).prop("href"); if (target_URL == current_page_URL) { $('nav a').parents('li, ul').removeClass('active'); $(this).parent('li').addClass('active'); return false; } } }); }); });
你可以在每个页面的BODY标签上添加一个不同的类，例如在主页上你可以这样：
然后这个css：
.nav-1-on .nav-1 a, .nav-2-on .nav-2 a, .nav-3-on .nav-3 a, .nav-4-on .nav-4 a { // set your styles here }
资产净值元素：
＃
或者，您可以在每个页面上的BODY上放置一个类，然后通过jQuery获取该类，并根据该标记将.active类添加到正确的导航项。
然后为每个页面添加以下内容：
//家
$(document).ready(function () { $('.home').addClass('active'); });
//项目页面
$(document).ready(function () { $('.Project').addClass('active'); });
//客户页面
$(document).ready(function () { $('.Customer').addClass('active'); });
//员工页面
$(document).ready(function () { $('.Staff').addClass('active'); });
$('ul.nav>li.home>a').click(); // first. same to all the other options changing the li class name
(function (window) { bs3Utils = {} bs3Utils.nav = { activeTab: function (tabId) { /// /// 设置需要展现的tab /// /// $('.nav-tabs a[href="#' + tabId + '"]').tab('show'); } } window.bs3Utils = bs3Utils; })(window);
例：
var _actvieTab = _type == '0' ? 'portlet_tab2_1' : 'portlet_tab2_2'; bs3Utils.nav.activeTab(_actvieTab);
$( ".nav li" ).click(function() { $('.nav li').removeClass('active'); $(this).addClass('active'); });
看一下这个。
对于单页网站，菜单项只是跳到页面的其他部分，这个简单的解决方案适合我：
$('.nav li').on('click', function(){ $('.nav li').removeClass('active'); $(this).addClass('active'); });
对于单页网站，以下是我使用的。 它不仅根据点击的内容设置活动元素，还会在初始页面加载时检查URL位置内的哈希值。
$(document).ready(function () { var removeActive = function() { $( "nav a" ).parents( "li, ul" ).removeClass("active"); }; $( ".nav li" ).click(function() { removeActive(); $(this).addClass( "active" ); }); removeActive(); $( "a[href='" + location.hash + "']" ).parent( "li" ).addClass( "active" ); });
我正在使用Flask Bootstrap。 我的解决方案有点简单，因为我的模板已经从Flask接收选项或选项作为参数。
var choice = document.getElementById("{{ item_kind }}"); choice.className += "active";
我刚刚在名为target-active的ul部分添加了一个自定义类
如果每个li标签单击从不同的地方或相同的地方获取新页面，则无需添加jquery removeClass函数。
为每个页面添加简单的一行jquery代码以获得所需的结果
第一个链接页面
$(function(){ $(".target-active").find("[href='/']").parent().addClass("active"); });
第二个链接页面
$(function(){ $(".target-active").find("[href=https://stackoverflow.com/questions/15082316/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap/find-truck]").parent().addClass("active"); });
第3个链接页面
$(function(){ $(".target-active").find("[href=https://stackoverflow.com/questions/15082316/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap/our-service]").parent().addClass("active"); });
第4个链接页面
$(function(){ $(".target-active").find("[href=https://stackoverflow.com/questions/15082316/how-to-set-active-class-to-nav-menu-from-twitter-bootstrap/about-us]").parent().addClass("active"); });