1

私はCSSタブを持っています。タブがクリックされたときにフェードイン効果を得ようとしています

cssタブをアニメーション化するためのチュートリアルがWeb上に1つ見つかりましたが、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>

Jクエリ

  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 に答える