jQuery新手求助：实现点击切换两个div的显示与隐藏

嘿，作为jQuery新手能想到自己动手尝试已经超棒啦！针对你想要实现的「点击第一个div隐藏它并显示第二个，再点击第二个切回第一个」的需求，我给你整理了几种简单易懂的实现方式，你可以根据自己的习惯选择：

方法一：使用jQuery的toggle()方法（最简洁） #

toggle()方法可以直接切换元素的显示/隐藏状态，我们给两个div绑定点击事件，互相切换对方的状态即可：

<div class="div1">我是第一个Div，点击我切换</div>
<div class="div2" style="display: none;">我是第二个Div，点击我切回去</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  // 点击第一个div，切换两个div的显示状态
  $('.div1').click(function(){
    $(this).toggle();
    $('.div2').toggle();
  });
  
  // 点击第二个div，同样执行切换逻辑
  $('.div2').click(function(){
    $(this).toggle();
    $('.div1').toggle();
  });
});
</script>

这个方法的好处是代码简洁，不需要手动判断元素当前的显示状态，jQuery会帮我们自动处理。

方法二：用hide()和show()结合状态判断 #

如果你想更清晰地掌控每一步逻辑，可以手动判断元素是否可见，再执行对应的显示/隐藏操作：

<div class="div1">第一个Div</div>
<div class="div2" style="display: none;">第二个Div</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('.div1').click(function(){
    // 如果第一个div处于显示状态，就隐藏它并显示第二个
    if($(this).is(':visible')){
      $(this).hide();
      $('.div2').show();
    }
  });
  
  $('.div2').click(function(){
    if($(this).is(':visible')){
      $(this).hide();
      $('.div1').show();
    }
  });
});
</script>

这种方式逻辑更直观，适合新手理解每个步骤的执行逻辑。

方法三：通过CSS类控制显示隐藏（推荐，符合前端分离思想） #

我们可以定义一个hidden类，通过添加/移除这个类来控制元素的显示，这样样式和逻辑分离，后期维护起来更灵活：

<style>
.hidden {
  display: none;
}
/* 可以给div加些样式，让点击区域更明显 */
.div1, .div2 {
  padding: 10px;
  border: 1px solid #ccc;
  cursor: pointer;
}
</style>

<div class="div1">第一个Div</div>
<div class="div2 hidden">第二个Div</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
  $('.div1').click(function(){
    $(this).addClass('hidden');
    $('.div2').removeClass('hidden');
  });
  
  $('.div2').click(function(){
    $(this).addClass('hidden');
    $('.div1').removeClass('hidden');
  });
});
</script>

这种方式把样式控制交给CSS，JS只负责切换类，后期如果要修改隐藏的效果（比如改成渐变隐藏），只需要修改CSS即可，非常方便。

小提示 #

• 一定要先引入jQuery库哦，否则所有jQuery代码都会失效~
• 可以给div添加cursor: pointer样式，让用户知道这是可点击的区域。

内容的提问来源于stack exchange，提问作者Siful Islam