1

我有 css 选项卡，我试图在单击选项卡时获得淡入淡出效果

我在网上找到了 1 个教程来动画 css 选项卡，但是我不想更改我的 css 等。我复制粘贴了 jquery 代码并进行了必要的更改

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

问题是，当我重新单击选项卡时，内容消失了。谁能帮助我。

这里的代码

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

谁能帮助我。

4

2 回答 2

2

我已经更新了您的代码，它现在可以完美运行：

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

于 2013-05-19T19:36:46.537 回答
1

首先..

.attr()当您有权访问.addClass()和.removeClass()方法时，为什么要替换使用的类。

你的主要问题是这条线

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

应该是

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

检查小提琴

于 2013-05-19T19:38:25.093 回答