jquery 百叶窗特效

$(document).ready(function(){
    $('.panel').hide(); // 初始隐藏所有面板
    $('.tab').click(function(){
        var panelId = $(this).data('panel'); // 获取对应的面板ID
        $('.panel').not('#' + panelId).slideUp(); // 关闭其他面板
        $('#' + panelId).slideToggle(); // 切换当前面板
    });
});

<div class="tabs">
    <div class="tab" data-panel="panel1">Tab 1</div>
    <div class="tab" data-panel="panel2">Tab 2</div>
    <div class="tab" data-panel="panel3">Tab 3</div>
</div>

<div id="panel1" class="panel">Content for Tab 1</div>
<div id="panel2" class="panel">Content for Tab 2</div>
<div id="panel3" class="panel">Content for Tab 3</div>