CodePen Demo

Question

我将尝试用不同的方法再次提出这个问题。

这是我的HTML：

<div class="tabs">
<ul class="tab-links">
    <li id="aa" class="active"><a href="#about">About</a></li>
    <li id="bb"><a href="#CV">CV</a></li>
    <li id="cc"><a href="#contact">Contact</a></li>
</ul>

“联系人”选项卡包含一个表单，其中包含提交按钮。

这是jQuery：

$("form").submit(function(){
  alert("Submitted");
  $('#aa').removeClass('active');
  $('#cc').addClass('active');
});

此时，jQuery仅在按下表单提交按钮时输出警报消息。另外我想要＆lt; li> class = active，要从about＆lt;中删除li>并被添加到联系人＆lt; li>。

Answer 1

这个脚本没有错。你只是错过了.active班级风格。

CodePen Demo

保留所有内容，但添加一些带有active类的CSS，以显示菜单项实际上是活动的。

示例CSS

.active {
  background-color: red;
  font-style: italic;
}

你可以随心所欲，但实际上你必须告诉它该做什么。

Answer 2

您的代码需要进行调整，以便页面不会刷新 - 刷新会将所有内容重置为page load状态。您可以使用event.preventDefault()并通过ajax提交表单，否则您必须使用服务器端代码来管理元素：

$("form").submit(function(e){
  e.preventDefault();
  //alert("Submitted");
  $('#aa').removeClass('active');
  $('#cc').addClass('active');
  //check #aa and #cc now
  //submit form via ajax here.
});

jQuery按提交添加和删除<li>类</li>

2 个答案:

CodePen Demo