在单击不同的html元素时隐藏先前使用jquery显示的html元素

使用jQuery隐藏先前显示的元素

基础概念

在网页开发中，经常需要实现交互效果，比如点击一个元素时显示某些内容，点击另一个元素时隐藏之前显示的内容。这涉及到DOM操作和事件处理。

解决方案

方法1：使用公共类名

// 给所有可点击元素添加相同的类名，如'toggle-btn'
$('.toggle-btn').click(function() {
  // 首先隐藏所有相关元素
  $('.content-to-toggle').hide();
  
  // 然后显示当前点击元素对应的内容
  $(this).next('.content-to-toggle').show();
});

方法2：使用数据属性关联

<button data-target="#content1">显示内容1</button>
<button data-target="#content2">显示内容2</button>

<div id="content1" class="content">内容1</div>
<div id="content2" class="content">内容2</div>

<script>
$('button').click(function() {
  $('.content').hide(); // 隐藏所有内容
  $($(this).data('target')).show(); // 显示当前目标内容
});
</script>

方法3：使用选项卡模式

<div class="tabs">
  <button class="tab-btn active" data-tab="tab1">标签1</button>
  <button class="tab-btn" data-tab="tab2">标签2</button>
</div>

<div class="tab-content" id="tab1" style="display:block;">内容1</div>
<div class="tab-content" id="tab2">内容2</div>

<script>
$('.tab-btn').click(function() {
  // 移除所有按钮的active类
  $('.tab-btn').removeClass('active');
  // 给当前按钮添加active类
  $(this).addClass('active');
  
  // 隐藏所有内容
  $('.tab-content').hide();
  // 显示当前内容
  $('#' + $(this).data('tab')).show();
});
</script>