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

使用数据attribute淡化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');

之后，在添加类之前检查是否为空：

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

Answer 2

如果您希望根据其ID添加/删除任何类，则可以使用removeClass（）和addClass（）。

示例：

$("#setting-w").on("click", function(){
    $("#content-w").removeClass('active');
    $("#cover-w").removeClass('active');
    $("#setting-w").addClass('active');
}

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

2 个答案: