装载量JS中的addClass和removeCLass

Question

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

但是我有一个内容div，我在PHP中加载文件。但是当我加载某物时，脚本重置，第一个li被选中。计划：

我点击事件，它得到新的类和内容是加载的。现在，当我单击events时，页面加载并在第一个li中看到内容但类。

怎么改呢？

编辑:好的，伙计们，我改变了代码，但它仍然不能像我想要的那样工作。当我在url的链接中"#“时，页面会以新的方式加载，我丢失了这个JS。(又开始了)。

代码：

​

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

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

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

$(document).ready(function () {
    $("#MB4").click(function () {
        $(this).addClass("active");
		$("#MB1").removeClass("active");
		$("#MB2").removeClass("active");
		$("#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"的链接，等等。单击此链接，整个页面将重新加载新的查询字符串。

链接应该异步地获取数据吗？

如果是，您应该将jquery返回到原来的方式.用我上面的答案代替你对$(document).ready({[...]的回答。

如果没有，我建议您使用来确保正确的菜单项设置为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"; ?>