如何通过jQuery实现下拉选项点击触发对应标签页的点击事件

需求说明 #

拥有带data-id属性的下拉选项，以及对应id的标签页，需要实现点击下拉选项时，触发对应标签页的点击事件，切换显示标签页内容（点击第N个下拉选项打开第N个标签页）。现有基础代码，核心触发逻辑未完成。

解决方案 #

核心逻辑是获取下拉选项的data-id值，定位到对应ID的标签页元素，触发其点击事件，同时优化标签页的激活状态管理，避免多个内容同时显示：

修改后的JavaScript代码 #

// 下拉选项点击事件
jQuery('.dropdown-content span').on("click", function(){
    // 获取当前选项对应的标签页ID
    const targetTabId = jQuery(this).data('id');
    // 触发对应标签页的点击事件
    jQuery('#' + targetTabId).click();
});

// 标签页点击事件（优化版）
jQuery('[id^="content"]').on('click', function(){
    // 先移除所有内容的active类，避免多个内容显示
    jQuery('.content').removeClass('active');
    // 给当前标签页的内容添加active类
    jQuery('.content', this).addClass('active');
});

代码解释 #

• jQuery(this).data('id')：获取当前点击的下拉选项的data-id属性值，该值与目标标签页的id完全对应。
• jQuery('#' + targetTabId).click()：通过ID选择器定位到目标标签页，调用click()方法模拟点击，触发标签页的切换逻辑。
• 标签页点击事件中先移除所有.content的active类，确保每次只有当前标签页的内容处于显示状态。

完整代码示例 #

.dropdown-content span{
    position:relative;
    cursor:pointer;
}

.tabs {
    position:relative;
    display:flex;
    flex-direction:row;
    margin-top:50px;
}

.tab {
    padding:20px;
    display:block;
    text-align:center;
    cursor: pointer; /* 给标签页添加鼠标指针，提示可点击 */
}

.content {
    display:none;
}

.active {
    display:block
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropDownBtn">
    <p>Numbers:</p>
</div>
<div class="dropDownContainer">
    <div id="tabDropdown" class="dropdown-content">
        <span data-id="content1">1</span>
        <span data-id="content2">2</span>
        <span data-id="content3">3</span>
     </div>
</div>

<div class="tabs">
    <div class="tab " id="content1">1
      <span class="content">some content 1</span>
    </div>
    <div class="tab" id="content2">2
      <span class="content">some content 2</span>
    </div>
    <div class="tab" id="content3">3
      <span class="content">some content 3</span>
    </div>
</div>

注：给.tab添加了cursor: pointer提升交互体验；修改内容文本方便区分不同标签页的显示内容。

内容的提问来源于stack exchange，提问作者Sandi Budic