基于jquery自己写tab滑动门(通用版)

当然，下面是一个基于jQuery实现的简单且通用的Tab滑动门效果示例。这段代码会监听Tab的点击事件，并显示对应的Tab内容，同时隐藏其他Tab的内容。


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery Tab 滑动门</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
    .tabs {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .tabs li {
        float: left;
        margin-right: 10px;
        cursor: pointer;
    }
    .tab-content {
        display: none;
        border: 1px solid #ccc;
        padding: 20px;
    }
    .tab-content.active {
        display: block;
    }
</style>
</head>
<body>

<ul class="tabs">
    <li class="tab-link" data-tab="tab1">Tab 1</li>
    <li class="tab-link" data-tab="tab2">Tab 2</li>
    <li class="tab-link" data-tab="tab3">Tab 3</li>
</ul>

<div id="tab1" class="tab-content active">
    <p>Content for Tab 1.</p>
</div>
<div id="tab2" class="tab-content">
    <p>Content for Tab 2.</p>
</div>
<div id="tab3" class="tab-content">
    <p>Content for Tab 3.</p>
</div>

<script>
$(document).ready(function(){
    $('.tab-link').click(function(){
        var tabId = $(this).data('tab');
        $('.tab-content').removeClass('active');
        $('#' + tabId).addClass('active');
    });
});
</script>

</body>
</html>

### 说明：

1. **HTML结构**：我们定义了一个包含三个Tab链接的列表（`

    `），每个链接都有一个`data-tab`属性，其值对应着要显示的内容的ID。然后，我们定义了三个`div`元素，每个都包含一段内容，并默认第一个Tab的内容是可见的（通过`.active`类）。

    2. **CSS样式**：我们为Tab链接和内容定义了一些基本的样式，包括隐藏所有非活动的Tab内容（`.tab-content`）和显示活动的Tab内容（`.tab-content.active`）。

    3. **jQuery脚本**：当页面加载完毕时，我们为所有的`.tab-link`元素添加了一个点击事件监听器。当点击某个Tab链接时，我们首先移除所有`.tab-content`元素的`active`类，然后为与点击的Tab链接的`data-tab`属性值相匹配的`div`元素添加`active`类，从而显示相应的内容。

    这样，就实现了一个简单的Tab滑动门效果。你可以根据需要调整HTML结构和CSS样式。