jq 使用类名做点击事件 自定义选项卡

在jQuery (jq) 中，你可以使用类名作为元素的点击事件处理程序，用于创建自定义选项卡功能。这种做法通常涉及到以下几个步骤：

1. **HTML结构**:
首先，在HTML中创建一些切换内容的`<div>`标签，给每个选项卡设置一个唯一的ID，并附加一个共同的`class`如"tab-content"，表示它们都是内容区域。同时，为每个选项卡按钮添加一个特定的类，比如"tab"及其对应的"active"类，表示当前激活的状态。

<ul class="tabs">
  <li class="tab active" data-tab="tab1">选项卡1</li>
  <li class="tab" data-tab="tab2">选项卡2</li>
  <!-- 更多选项卡... -->
</ul>

<div class="tab-content">
  <div id="tab1" class="tab-pane active">这是内容1</div>
  <div id="tab2" class="tab-pane">这是内容2</div>
  <!-- 更多内容... -->
</div>

2. **JavaScript/jQuery**:
然后，在jQuery中绑定点击事件到所有`.tab`元素上，通过`data-tab`属性找到对应的内容区并切换显示状态。

$(document).ready(function() {
  $('.tabs li').click(function(e) {
    e.preventDefault(); // 阻止默认的链接跳转
    var tabId = $(this).attr('data-tab');
    $('.tab-content .tab-pane').hide(); // 隐藏所有内容
    $('#' + tabId + ' .tab-pane').show(); // 显示选中的内容
    
    // 移除现有active类，添加到新选中的选项卡
    $('.tab.active').removeClass('active');
    $(this).addClass('active');
  });
});

在这个例子中，当用户点击任何一个选项卡时，会切换对应的`.tab-pane`类内容，并且只有被点击的选项卡会获得"active"类，显示出相应的样式。