使用按钮单击JavaScript显示/隐藏div与子div

4 回答

• 1

  通过定义哪个div必须显示在哪个按钮单击上，用简单的jquery来做 .

  $('btnicon').on('click', function(){
      $('#tabicon,.form-group').show();
  });
  
  $('btnicon').on('click', function(){
      $('#tabimages,.form-group').show();
  });
  

  If you want to show this div and hide another div on button click use this

  $('btnicon').on('click', function(){
      $('#tabicon,.form-group').show();
      $('#tabimages').hide();
  });
  
  $('btnicon').on('click', function(){
      $('#tabimages,.form-group').show();
      $('#tabicon').hide();
  });
  

  回复于 2024-04-26T05:33:16+08:00
• 1

  $('input[name=btnicon]').click(function(){//icon click
  $('#tabicon').show()//show icon div
  $('#tabimages').hide()//hide image div
  
  }).click()//manually call click to show icon div on load
  $('input[name=btnimages]').click(function(){//image click
  $('#tabicon').hide()//hide icon div
  $('#tabimages').show()//show image div
  
  })
  

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <div class="form-group">
      <div id="tabicon" style="display:none;">
          <span>ICON</span>
      </div>
      <div id="tabimages" style="display:none;">
          <span>IMAGES</span>
      </div>
  </div>
  
  <div id="button_tab">
      <input type="button" name="btnicon" value="icon">
      <input type="button" name="btnimages" value="images">
  </div>
  

  回复于 2024-04-26T05:33:16+08:00
• 0

  试试这个：你必须从父div中删除 display:none ，因为这将隐藏其所有子元素 . 创建按钮处理程序并使用 .show() 和 .hide() 方法，如下所示 -

  HTML：

  <div class="form-group">
      <div id="tabicon" style="display:none;">
          <span>ICON</span>
      </div>
      <div id="tabimages" style="display:none;">
          <span>IMAGES</span>
      </div>
  </div>
  
  <div id="button_tab">
      <input type="button" name="btnicon" value="icon">
      <input type="button" name="btnimages" value="images">
  </div>
  

  jQuery的：

  $(function(){
     $('input[name="btnicon"]').click(function(){
        $('#tabicon').show();
        $('#tabimages').hide();
     });
     $('input[name="btnimages"]').click(function(){
        $('#tabicon').hide();
        $('#tabimages').show();
     });
   });
  

  回复于 2024-04-26T05:33:16+08:00
• 0

  您可以通过向父容器添加和删除类来设置属性，而不是将“隐藏”属性直接设置为您隐藏/显示的元素 . “形式的基团” .

  .parent-class, #tabicon, #tabimage {
    display: none;
  }
  
  .parent-class.icon-class, .parent-class.image-class {
    display: block;
  }
  
  .parent-class.icon-class #tabicon{
    display: block;
  }
  
  .parent-class.image-class #tabimage {
    display: block;
  }
  

  这样，当您将类添加到父容器时，您将显示隐藏父容器，基于它使任一子项处于活动状态 . 根据父容器中哪些类处于活动状态，您已设置为活动的当前子项也将可见 .

  如果没有子项处于活动状态，则将隐藏父容器 .

  回复于 2024-04-26T05:33:16+08:00