如何在<div>标签之间切换？

Question

 <select id="typeselect" name="value" onchange="OnChangeSelect()" >
        <option value="1">General</option><br />
        <option value="2">Featured</option><br />
    </select>

    <div id="formbody" class="col-md-12">
  <div style="display:none" id="featured-div" disabled>
   <?php get_template_part("publish_game_fe") ?>
  </div>
  <div  style="display:block" id="general-div">
   <?php get_template_part("publish_game_nr") ?>
  </div>
</div>

取决于在下拉菜单中选择的选项，我想显示“featured-div”或“general-div”

我尝试使用以下脚本

    function OnChangeSelect()
{
    var e=document.getElementById("typeselect");
    var val = e.value;  
          if(val==1){
        document.getElementById("general-div").style.display="block";
        // document.getElementById("general-div").style.zIndex = 2;
        document.getElementById("featured-div").style.display="none";
         //document.getElementById("featured-div").style.zIndex = 1;
      }
      else{
            document.getElementById("general-div").style.display="none";
        // document.getElementById("general-div").style.zIndex = 1;
          document.getElementById("featured-div").style.display="block";
         // document.getElementById("featured-div").style.zIndex = 2;
      }
}

表格看起来像这样

当我点击“general-div”的选择图像按钮时，它什么也没做 但当我点击选择图像按钮时，如果“feature-div”，它会打开资源管理器两次。如果我不包括其中一个形式的其他作品完全没问题。我想用style.display隐藏div只会让它看不见而且feature-div仍然与general-div重叠。完成这个操作的正确方法是什么？

Answer 1

你可以使用 jQuery的 show（），hide（）函数来实现所需的输出而不是display：block和display：none