Question

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

但我有一个内容div，我在PHP中加载文件。但是当我加载脚本时，脚本重置并且选择了第一个li。方案：
我点击事件，它获得新类，内容加载。现在，当我点击事件，页面加载，我看到内容，但在第一个li中的类。
怎么改呢？

编辑：好的，我改变了代码，但它仍然没有按照我的意愿工作。 当我改变时＃34;＃＆＃34;在链接到url，页面加载为新的，我丢失了这个JS 。（它又开始了。）

CODE：

＆＃13;

$(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");
    });
});

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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成为目标，即使数据在脚本之后加载，也会设置事件处理程序。
此外，对菜单的任何后续更改都不会要求您重置事件处理程序。

修改

根据示例代码的更改：

当您拥有<a href="#"等时，按此链接不会让您离开页面。

您将部分链接更改为<a href="?something"，依此类推。单击此链接，将使用新的查询字符串重新加载整个页面。

链接是否应该异步获取数据？
如果是，则应将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"; ?>

JS中的addClass和removeCLass加载内容

1 个答案: