jQuery选项卡不起作用

debugcn 发表于 Dev

伊莉安娜·努涅斯（Iliana Nunez）

我正在学习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');
            });
        });
    }));

我是从观看的视频中编写此代码的，对于这个人来说，该代码非常有效，所以我不明白为什么它对我不起作用。

来宾271314

的语法错误，于.on('click', function({结束js });}));

尝试调用.hide()上.panel显示之前.panel.active; 替代.slideDown()的.show()

$(function(){
    $(".tab-panels .tabs li").on("click", function(e) {
        $(this).siblings().add(".panel").removeClass("active");
        $(".panel").hide();
        $(this).addClass("active");

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

        $("#" + panelToShow).addClass("active")
        .slideDown(300);
    })
});

jsfiddle http://jsfiddle.net/nLu4Lpoy/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。