javascript - Jquery 选项卡不起作用

Question

我正在学习 jquery，我正在尝试制作一个选项卡。我不明白为什么这不起作用

这里有我的 HTML

<div class="tab-panels">
    <ul class="tabs">
        <li rel="panel1"class="active">All</li>
        <li rel="panel2">Animals</li>
        <li rel="panel3">People</li>
        <li rel="panel4">Landscape</li>
    </ul>
    <div id="panel1" class="panel active">
        <img src="images/tab1.jpg"/>
        <img src="images/tab2.jpg"/>
    </div>
    <div id="panel2" class="panel">
        <img src="images/tab3.jpg"/>
        <img src="images/tab4.jpg"/>
    </div>
    <div id="panel3" class="panel">
        <img src="images/tab5.jpg"/>
        <img src="images/tab6.jpg"/>
    </div>
    <div id="panel4" class="panel">
        <img src="images/tab7.jpg"/>
        <img src="images/tab8.jpg"/>
    </div>
</div>

这是我的 jquery

$(function(){
    $('.tab-panels .tabs li').on('click', function({
        var $panel = $(this).closest('.tab-panels');
        $panel.find('.tabs li.active').removeClass('active');
        $(this).addClass('active');

        var panelToShow = $(this).attr('rel');

        $panel.find('.panel.active').show(300, showNextPanel);

            function showNextPanel(){
            $(this).removeClass('active');

            $('#'+panelToShow).slideDown(300, function(){
                $(this).addClass('active');
            });
        });
    }));

我根据我观看的视频制作了这段代码，对于这个人来说，代码运行得很好，所以我不明白为什么它对我不起作用。

Answer 1

您忘记初始化它

尝试这样

$(function() {
    $( ".tab-panels" ).tabs();
});