将类属性更改为活动的表单

Question

I have a web page associated with 3 <li> and each has its own onclick() function. By default, one of them is active. Now I have a form, if this form is submitted I want it to take me to one of the other two <li>.

In other words, I want it to remove the active class from the default one, and add it to one of the other two. How can I do that?

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

Use data attribute to fade your 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>

After page submit if your page is reloaded page loose state. So set your value when page submit like:

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

Get localStorage when page load like:

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

After that check for null before add class:

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

</div>