javascript - 将类属性更改为事件的表单

Question

我有一个与 3 <li> 关联的网页每个都有自己的onclick()功能。默认情况下，其中之一处于事件状态。现在我有一个表单，如果提交此表单，我希望它带我到另外两个 <li> 之一.

换句话说，我希望它从默认类中删除事件类，并将其添加到其他两个类之一。我怎样才能做到这一点？

HTML:

<div class="container">
  <ul class="editor-nav">
    <li id="content-w" class="en-nav active">1. Add Status</li>
    <li id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
    <li id="cover-w" class="en-nav">3. Upload Video</li>
  </ul>

</div>

<div class="be-large-post-align" id="firstdiv">
  <form class="" action="work.php" method="post">

    <textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>

    <input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>

<div class="be-large-post-align" id="seconddiv" style="display:none;">

  <form class="" action="work.php" method="post" enctype="multipart/form-data">
    <!-- <label class="btn btn-primary" for="my-file-selector">
      <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
      onchange="$('#upload-file-info').html(this.files[0].name)">
      Button Text Here
      </label>
      <span class='label label-info' id="upload-file-info"></span> -->

    Select Image Files to Upload:
    <input type="file" name="files[]" multiple>
    <textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>

    <input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
  </form>
</div>


<div class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>

JQuery:

<script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" > </script> 
<script src = "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"> </script>

 <script type = "text/javascript" >

  $("#setting-w").on("click", function() {
    $("#firstdiv").fadeOut(1, function() {
      $("#seconddiv").fadeIn(1, function() {});
      $("#thirddiv").fadeOut(1, function() {});
    });
  });

$("#content-w").on("click", function() {
  $("#seconddiv").fadeOut(0.1, function() {
    $("#firstdiv").fadeIn(0.1, function() {});
    $("#thirddiv").fadeOut(0.1, function() {});
  });
});

$("#cover-w").on("click", function() {
  $("#seconddiv").fadeOut(0.1, function() {
    $("#firstdiv").fadeOut(0.1, function() {});
    $("#thirddiv").fadeIn(0.1, function() {});
  });
});

</script>

Answer 1

使用数据属性来淡化您的div。

$('.editor-nav li').click(function(e) {
  $('.editor-nav li').removeClass('active');

  var data = $(this).data('myval');
  if (data == "2" || data == "3") {
    $(this).addClass('active');
    var tstDiv = data - 1;
    $(this).attr('disabled', true);
    $(document).find($('*[data-val="' + data + '"]')).fadeIn();
    $(document).find($('*[data-val="' + tstDiv + '"]')).fadeOut();
  }
});

.active {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
  <ul class="editor-nav">
    <li data-myval="1" id="content-w" class="en-nav active">1. Add Status</li>
    <li data-myval="2" id="setting-w" name="setting-w" class="en-nav">2. Upload Image</li>
    <li data-myval="3" id="cover-w" class="en-nav">3. Upload Video</li>
  </ul>

</div>

<div data-val="1" class="be-large-post-align" id="firstdiv">
  <form class="" action="work.php" method="post">

    <textarea id="special" name="post" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>

    <input type="submit" name="submitMe" class="buttons-navbar btn btn-primary" value="POST" /></form>
</div>

<div data-val="2" class="be-large-post-align" id="seconddiv" style="display:none;">

  <form class="" action="work.php" method="post" enctype="multipart/form-data">
    <!-- <label class="btn btn-primary" for="my-file-selector">
  <input id="my-file-selector" type="file" multiple="multiple" style="display:none"
  onchange="$('#upload-file-info').html(this.files[0].name)">
  Button Text Here
  </label>
  <span class='label label-info' id="upload-file-info"></span> -->

    Select Image Files to Upload:
    <input type="file" name="files[]" multiple>
    <textarea id="special" name="post2" rows="10" cols="80" placeholder="What's on your mind, <?=$_SESSION['name']?>?"></textarea>

    <input type="submit" name="submitIt" class="buttons-navbar btn btn-primary" value="Upload" />
  </form>
</div>


<div data-val="3" class="be-large-post-align" id="thirddiv" style="display:none;">this is working! </div>

页面提交后，如果您的页面重新加载，页面处于松散状态。因此，在页面提交时设置您的值，例如:

localStorage.setItem('key', 'your form Number')

页面加载时获取 localStorage，如下所示:

var formID = localStorage.getItem('key');

之后在添加类之前检查 null:

if (localStorage.getItem("key") != null) {
  (".editor-nav ul li").eq(formID ).addClass("active"); // Check this one on page load
}