使用jquery为css选项卡添加动画

Question

我有css标签，我试图得到fadein效果时，一个标签被点击

我在网络上找到了一个tutorial用来制作css标签，但是我不想改变我的css，等等。我复制粘贴了jquery代码并做了必要的修改。

下面是我到目前为止所尝试过的http://jsfiddle.net/McZV9/8/

问题是，当我重新单击选项卡时，content disappears.Can任何人都会帮助我。

下面是代码

HTML

<!DOCTYPE html>
<ul class="tabs clearfix">
    <li><a href="#html" class="current">HTML</a>
    </li>
    <li><a href="#javascript">JavaScript</a>
    </li>
    <li><a href="#css">CSS</a>
    </li>
</ul>
<div class="content">
    <div class="current" id="html">grtgrtgrtg</div>
    <div id="javascript">erfefr</div>
    <div id="css">
        <p>Similar to the the CSS is used to style the tooltip, or info box.</p>
    </div>
</div>

Jquery

  function resetTabs() {
        $(".content > div").hide(); //Hide all content
        $(".tabs a").attr("class", ""); //Reset id's      
    }

    var myUrl = window.location.href; //get URL
    var myUrlTab = myUrl.substring(myUrl.indexOf(".")); // For localhost/tabs.html#tab2, myUrlTab = .tab2     
    var myUrlTabName = myUrlTab.substring(0, 4); // For the above example, myUrlTabName = #tab

    (function () {
        $(".content > div").hide(); // Initially hide all content
        $(".tabs li:first a").attr("class", "current"); // Activate first tab
        $(".content > div:first").fadeIn(); // Show first tab content

        $(".tabs a").on("click", function (e) {
            e.preventDefault();
            if ($(this).attr("id") == "current") { //detection for current tab
                return
            } else {
                resetTabs();
                $(this).attr("class", "current"); // Activate this
                $($(this).attr('name')).fadeIn(); // Show content for current tab
            }
        });

        for (i = 1; i <= $(".tabs li").length; i++) {
            if (myUrlTab == myUrlTabName + i) {
                resetTabs();
                $("a[name='" + myUrlTab + "']").attr("id", "current"); // Activate url tab
                $(myUrlTab).fadeIn(); // Show url tab content        
            }
        }
    })()        

有人能帮帮我吗？

Answer 1

我已经更新了你的代码，现在它可以完美地工作了：

(function () {

    $(".tabs a").on("click", function(e) {
        e.preventDefault();
        var hash = $(this).attr('href');
        window.location.hash = 'tab-' + hash.replace('#', '');

        if ($(this).hasClass("current")) { //detection for current tab
            return;
        } else {
            $(".content > div").hide();
            $(".tabs a").removeClass("current");
            $(this).addClass("current"); // Activate this
            $(hash).fadeIn(); // Show content for current tab
        }
    });

    $(".tabs li:first a").trigger('click'); // Activate first tab

    if(window.location.hash != ''){
        $('.tabs a[href="'+window.location.hash.replace('tab-', '')+'"]').trigger('click');
    }

})();

下面是一个更新的示例：http://jsfiddle.net/McZV9/14/

Answer 2

首先..。

当您可以访问.addClass()和.removeClass()方法时，为什么要使用.attr()替换该类？

你的主要问题就是这行

$($(this).attr('name')).fadeIn();

应该是

$($(this).attr('href')).fadeIn();