插件与实战

<!-- 选项卡 -->
<div class="tabs">
    <button class="tab-btn active" data-t="1">HTML</button>
    <button class="tab-btn" data-t="2">CSS</button>
    <button class="tab-btn" data-t="3">JS</button>
</div>
<div class="tab-pane active" data-p="1">HTML 内容</div>
<div class="tab-pane" data-p="2">CSS 内容</div>
<div class="tab-pane" data-p="3">JS 内容</div>

<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script>
$(function () {
    $(".tab-btn").click(function () {
        var t = $(this).data("t");
        $(".tab-btn").removeClass("active");
        $(this).addClass("active");
        $(".tab-pane").removeClass("active").hide();
        $(".tab-pane[data-p=" + t + "]").addClass("active").fadeIn(200);
    });
});
</script>
<style>
.tab-pane { display: none; padding: 16px; border: 1px solid #eee; }
.tab-pane.active { display: block; }
.tab-btn.active { background: #558b2f; color: #fff; }
</style>