【问题标题】：jQuery Add and Remove <li> class by SubmitjQuery 通过提交添加和删除 <li> 类
【发布时间】：2014-12-11 01:56:00
【问题描述】：

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

这是我的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 仅在表单提交按钮被按下时输出警报消息。此外，我希望将

class= active，从 about

中删除并添加到联系人

。

【问题讨论】：

请为.active 类以及HTML 表单添加您的CSS。一个 jsFiddle 会很棒。
您确定提交没有刷新您的页面吗？因为如果这样做，元素将回到初始状态...

标签： jquery css tabs html-lists submit

【解决方案1】：

这个脚本没有错。您只是缺少 .active 类样式。

CodePen Demo

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

示例 CSS

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

你可以做任何你想做的事，但实际上你必须告诉它要做什么。

【讨论】：

【解决方案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.
});

【讨论】：