提交表单后更改 <il> 选项卡类

Question

我有一个看起来像这样的 jQuery 选项卡：

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

在联系人选项卡上，我放置了一个使用 php 的电子邮件表单。 我面临的问题是提交表单时 用户会自动重定向到 about 选项卡，因为这当然是 将类设置为“活动”。

我想要的是将“活动”类添加到联系人

并在提交表单后将其从 about

中删除，以便用户看到成功/错误消息显示在联系人选项卡。我已尝试按照this 中的说明执行此代码：

    $(document).ready(function () {
      $([#contact]).tabs( "option", "active", 3 );});

这并不能解决问题..

我对 php 或 jQuery 都不是很有经验，所以如果有人能指出我正确的方向，我将非常感激！

更新：

我已经在

中添加了id元素，并测试了下面的代码，当提交按钮被按下时会出现alert msg。但到目前为止，我还没有想出如何正确删除和添加类。

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

Answer 1

您可以使用 PHP 变量 & if 条件来完成此任务。

以下可能是一个可能的解决方案：

将您的 [your-contact-processing-file].php 编辑为以下内容：

<?php
  header("location: your-main-file.php?contact=1");
?>

使用以下代码编辑 your-main-file.php：

<?php
  // keep this PHP code on the top
  $con = '';

  if(isset($_REQUEST['contact'])){
    if(isset($_REQUEST['contact'] == 1)){
       $con = 1; 
    } else {
       $con = ''; // to avoid PHP error if some other value is passed through contact 
  }
 }
?>

<div class="tabs">
   <ul class="tab-links">
      <li 
          <?php 
               if ($con == '';) echo 'class="active"'; 
          ?>>
        <a href="#about">About</a>
      </li>
      <li><a href="#CV">CV</a></li>
      <li 
          <?php 
               if ($con == 1;) echo 'class="active"'; 
          ?>>
        <a href="#contact">Contact</a>
      </li>
   </ul>

希望这会有所帮助。

注意：它不是 jquery 解决方案，但应该可以正常工作。