JS中的addClass和removeCLass加载内容

Question

我在JS中的addClass和removeCLass有问题。我想这样做：

但我有一个内容div我在PHP中加载文件。但是，当我加载脚本重置，并选择第一个李。方案：
我点击事件，它会得到新的类，并加载内容。现在，当我点击事件，页面加载和我看到的内容，但在第一里课。
如何更改它？

编辑： 好吧我改变代码，但它仍然无法正常工作，因为我想。 当我在url链接中加入“＃”时，页面加载为新的，我丢失了这个JS。 （它重新开始）。

CODE：

$(document).ready(function() { 
 
    $("#MB1").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB2").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB3").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB4").removeClass("active"); 
 
    }); 
 
}); 
 

 
$(document).ready(function() { 
 
    $("#MB4").click(function() { 
 
     $(this).addClass("active"); 
 
\t \t $("#MB1").removeClass("active"); 
 
\t \t $("#MB2").removeClass("active"); 
 
\t \t $("#MB3").removeClass("active"); 
 
    }); 
 
});

#menu-div ul{ 
 
list-style-type:none; 
 
} 
 

 
.button a{ 
 
text-decoration: none; 
 
color:green; 
 
} 
 

 
.button a:hover{ 
 
color: red; 
 
} 
 

 
.button.active a{ 
 
text-decoration: underline; 
 
}

<div id="menu-div"> 
 
<ul> 
 
<li id="MB1" class="button active"><a href="?id=start">Home</a></li> 
 
<li id="MB2" class="button"><a href="?id=pro">Projects</a></li> 
 
<li id="MB3" class="button"><a href="#">About Us</a></li> 
 
<li id="MB4" class="button"><a href="?id=con">Contact</a></li> 
 
</ul> 
 
</div>

Answer 1

当你将使用

$('#menu li a').on('click', function(){ 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

点击动作会发生什么情况是，只有现有的对象接收事件处理程序。

你想用这样的事情，而不是：

$("body").on('click', '#menu li a', function(){ 
    $('li a.current').removeClass('current'); 
    $(this).addClass('current'); 
}); 

通过使body目标，即使脚本后的数据负载，事件处理程序将被设置。
此外，对菜单的任何后续更改都不会要求您重置事件处理程序。

---

编辑

每更改到示例代码：

1. 当你有<a href="#"等，按链接不会让你离开页面。
2. 您将一些链接更改为<a href="?something"等等。点击这个链接，整个页面重新加载新的查询字符串。

链接是否应该异步获取数据？
如果YES，你应该返回jquery的方式...并使用我的答案而不是你使用的$(document).ready({[...]。

如果否，我建议您使用PHP来确保正确的菜单项设置为active。
东西沿着线（我真的不知道PHP ...此代码可能会完全关闭）：现在

<a href="?whatever" class="button <?php if(request.querystring = "whatever") echo "active"; ?> 
<a href="?something" class="button <?php if(request.querystring = "something") echo "active"; ?>