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();
});

Answer 2

好像您拼写了错误的代码（假设您具有样式化的CSS代码）。 请参阅以下指标：

$(function () {
 $('.tab-panels .tabs li').on('click', function () { //<------ here
    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');
        });
    } //<------ here
  });
}); //<------ here(must close dom ready function)

Answer 3

您的jQuery中有语法错误，请尝试以下操作：

$(function(){
    $('.tab-panels .tabs li').on('click', function(e){

        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');
            });
        };
    });
 });

快速JS小提琴

您的首次点击功能未正确设置，并且未正确关闭结尾。 通常，通过使函数保持良好的间距，对变量进行分组等，可以更轻松地解决此类问题。

Answer 4

.on('click', function({ ， js关闭});}));处的语法错误

在显示.panel.active之前，尝试在.panel上调用.panel .hide() ； 用.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/