我有一个html作为侧边栏，并使用Bootstrap。
<ul class="nav nav-list">
<li class="active"><a href="/">Link 1</a></li>
<li><a href="/link2">Link 2</a></li>
<li><a href="/link3">Link 3</a></li>
</ul>
我想做点什么：
当我click链接3等链接时，page content将更改为链接3的内容，而链接3将具有类active，并删除链接中的活动clss 1。
我认为这可以在jQuery中实现，我在SO中搜索了很多问题，例如：
我使用这个脚本：
$(document).ready(function () {
$('.nav li').click(function(e) {
$('.nav li').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
//e.preventDefault();
});
});
但是大多数人使用preventDefault，这将阻止继续采取行动。因此它无法更改为Link 3的页面内容。
如果我删除了preventDefault语句，当页面加载Link 3的内容时，活动类将返回Link 1.
那么有什么方法可以解决这个问题吗？
答案 0 :(得分：24)
你绑定了你点击了错误的元素，你应该将它绑定到a。
您阻止在li上发生默认事件，但li没有默认行为a。
试试这个：
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
答案 1 :(得分：5)
我正在使用引导程序导航
这对我来说很有帮助，包括活跃的主要下拉菜单和活跃的孩子
$(document).ready(function () {
var url = window.location;
// Will only work if string in href matches with location
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
// Will also work for relative and absolute hrefs
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
答案 2 :(得分：2)
如果您更改类和在同一个函数中加载内容，那么您应该没问题。
$(document).ready(function(){
$('.nav li').click(function(event){
//remove all pre-existing active classes
$('.active').removeClass('active');
//add the active class to the link we clicked
$(this).addClass('active');
//Load the content
//e.g.
//load the page that the link was pointing to
//$('#content').load($(this).find(a).attr('href'));
event.preventDefault();
});
});
答案 3 :(得分：1)
之前我遇到过同样的问题。 在这里尝试这个答案，它可以在我的网站上运行。
$(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;
}
}
});
});
来源：这是原始发布在how to set active class to nav menu from twitter bootstrap
答案 4 :(得分：1)
<script type="text/javascript">
$(document).ready(function(){
$('.nav li').click(function(){
$(this).addClass('active');
$(this).siblings().removeClass('active');
});
});
答案 5 :(得分：1)
人们尝试这是此问题的完美答案：
<script>
$(function(){
$('.nav li a').filter(function(){return this.href==location.href}).parent().addClass('active').siblings().removeClass('active')
$('.nav li a').click(function(){
$(this).parent().addClass('active').siblings().removeClass('active')
})
})
</script>
答案 6 :(得分：0)
如果您正在使用像Java这样的服务器端代码，那么您需要返回活动选项卡名称，并且在返回页面上有一些功能可以禁用（意味着删除活动类）除了您返回的选项卡之外的所有选项卡。
这需要您为每个标签添加ID或名称。多一点工作：）
答案 7 :(得分：0)
$(".nav li").click(function() {
if ($(".nav li").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
这就是我想出的。 它检查“li”元素是否具有活动类，如果不是，则跳过remove类部分。 我参加聚会有点晚了，但希望这会有所帮助。 ：）
答案 8 :(得分：0)
您可以使用Cookie将回传数据从一个页面保存到另一个页面。经过花费很多时间，我终于能够实现这一目标。我建议你给我答案（这是完全有效的，因为我也需要这个）。
首先将li标签提供给有效的ID名称，如
<ul class="nav nav-list">
<li id="tab1" class="active"><a href="/">Link 1</a></li>
<li id="tab2"><a href="/link2">Link 2</a></li>
<li id="tab3"><a href="/link3">Link 3</a></li>
</ul>
之后复制并粘贴此脚本。 因为我已经写了一些javascript来阅读，删除和创建cookie。
$('.nav li a').click(function (e) {
var $parent = $(this).parent();
document.cookie = eraseCookie("tab");
document.cookie = createCookie("tab", $parent.attr('id'),0);
});
$().ready(function () {
var $activeTab = readCookie("tab");
if (!$activeTab =="") {
$('#tab1').removeClass('ActiveTab');
}
// alert($activeTab.toString());
$('#'+$activeTab).addClass('active');
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
注意：确保根据您的要求进行了修改。我根据我的实现编写了这个脚本，并且它对我来说很好。
答案 9 :(得分：0)
这可以解决问题
$(document).ready(function () {
var url = window.location;
var element = $('ul.nav a').filter(function() {
return this.href == url || url.href.indexOf(this.href) == 0;
}).addClass('active').parent().parent().addClass('in').parent();
if (element.is('li')) {
element.addClass('active');
}
});
答案 10 :(得分：0)
以我为例的html代码
<ul class="navs">
<li id="tab1"><a href="index-2.html">home</a></li>
<li id="tab2"><a href="about.html">about</a></li>
<li id="tab3"><a href="project-02.html">Products</a></li>
<li id="tab4"><a href="contact.html">contact</a></li>
</ul>
而js代码是
$('.navs li a').click(function (e) {
var $parent = $(this).parent();
document.cookie = eraseCookie("tab");
document.cookie = createCookie("tab", $parent.attr('id'),0);
});
$().ready(function () {
var $activeTab = readCookie("tab");
if (!$activeTab =="") {
$('#tab1').removeClass('ActiveTab');
}
// alert($activeTab.toString());
$('#'+$activeTab).addClass('active');
});
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ') c = c.substring(1, c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function eraseCookie(name) {
createCookie(name, "", -1);
}
答案 11 :(得分：0)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
$(document).ready(function () {
var url = window.location;
$('ul.nav a[href="' + url + '"]').parent().addClass('active');
$('ul.nav a').filter(function () {
return this.href == url;
}).parent().addClass('active').parent().parent().addClass('active');
});
This works perfectly
答案 12 :(得分：0)
<ul class="nav nav-list">
<li id="tab1" class="active"><a href="/">Link 1</a></li>
<li id="tab2"><a href="/link2">Link 2</a></li>
<li id="tab3"><a href="/link3">Link 3</a></li>
</ul>