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

Quick JS Fiddle

您的第一次点击功能未正确设置且结束未正确关闭。通过保持函数间隔很好，对变量进行分组等，通常可以更轻松地解决这类问题。

Answer 4

.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/

Jquery选项卡不起作用

4 个答案: