Question

我有这个简单的代码来创建两个div的标签，但是当点击标签时元素不会淡入或淡出，但是如果我改变fadeIn和fadeOut来显示和隐藏，它工作正常，我不看错了什么：

  $("ul.tabs li").click(function(event)
                   {
                     event.preventDefault();
                    $("ul.tabs li").removeClass("active");
                    $(this).addClass("active");
                    $(".tab_content").fadeOut();

                    var activeTab = $(this).find("a").attr("href");
                    console.log(activeTab)
                    $(activeTab).fadeIn();
        });
    <ul class="tabs">
               <li class="page_item  active">
                                        <a href="#doss" class="option-doss">Doss</a>
                                    </li>
                <li class="page_item competitors-page">
                                        <a href="#competitors" class="option-competitors">Competitors</a>
                                    </li>
</ul>
    <div id="doss" class="tab_content clearfix"> 
                        <div class="men">
                             <a href="?cat=28"></a>
                         </div>
                        <div class="women">
                            <a href="?cat=37"></a>
                        </div>
                         <div class="kids">
                            <a href="?cat=44"></a>
                         </div>
                </div>
                <div id="competitors" class="tab_content clearfix">
                    competitors
                </div>

分辨

我删除了easing.js文件，它似乎有效。

Answer 1

您使用的是哪个版本的jquery？

如果你有一个古老的jquery版本，你可能需要为jquery easing插件添加一个额外的引用......

请参阅：

Answer 2

您的activeTab变量是一个URL，它应该是对DOM元素的引用。

而不是

$(activeTab).fadeIn(); //Which evaluates to $('?cat=n').fadeIn();

做类似的事情：

$(".tab_content").fadeIn();

FadeOut / FadeOut不工作，但show（）和hide（）做

2 个答案: