1

3つのタブのうちの1つをクリックすると、3つのdivを切り替えるJavaScriptがあります。

これが私のJavascriptです：

(function($){  
    $.fn.acidTabs = function(options) {     
            var settings = {
                        'style' : 'one'
             };     
                options = $.extend( settings, options );
                return this.each (function () {     
                    var o = options;
                    container = this;
                    container.setAttribute("class",o.style);
                    var navitem = container.querySelector("li");
                    //store which tab we are on
                    var ident = navitem.id.split("_")[1];
                    navitem.parentNode.setAttribute("data-current",ident);
                    //set current tab with class of activetabheader
                    navitem.setAttribute("class","tabActiveHeader");

                    //hide two tab contents we don't need
                    var pages = container.querySelectorAll(".tabpage");
                    for (var i = 1; i < pages.length; i++) {
                        pages[i].style.display="none";
                    }

                    //this adds click event to tabs
                    var tabs = container.querySelectorAll("li");
                    for (var i = 0; i < tabs.length; i++) {
                        tabs[i].onclick=displayPage;
                    }
                });

                // on click of one of tabs
                    function displayPage() {
                        var current = this.parentNode.getAttribute("data-current");
                        //remove class of activetabheader and hide old contents
                        document.getElementById("tabHeader_" + current).removeAttribute("class");
                        document.getElementById("tabpage_" + current).style.display="none";

                        var ident = this.id.split("_")[1];
                        //add class of activetabheader to new active tab and show contents
                        this.setAttribute("class","tabActiveHeader");
                        document.getElementById("tabpage_" + ident).style.display="block";
                        this.parentNode.setAttribute("data-current",ident);
                    }
            };
})(jQuery);

フェージング効果を受け入れるようにこれを変更することはできないようです。それとも、これを行うためのより良い方法がありますか？

あなたの助けが大好きです！ありがとうございました。

4

2 に答える 2

0

あなたがそれをすることができないので、それは簡単ではありません。2 つの css ステートメントを分割する必要があります。

opacity:0 と display:none を使用した新しい div は、表示をブロックに変更し、setTimeout を使用して不透明度を変更します (10 ミリ秒の遅延でも可能です)。

非表示にする div については反対のことを行います。

このようなもの：

var newdiv=document.getElementById("tabpage_" + ident);
newdiv.style.display="block";
setTimeout(function(){newdiv.style.opacity="1";},10);
于 2012-04-17T17:27:15.970 に答える
0

OK は、asp.net フォーラムの助けを借りてそれを理解しました。関数 displayPage() を次のように置き換えます。

var current = this.parentNode.getAttribute("data-current");
//remove class of activetabheader and hide old contents
$('#tabHeader_' + current).removeClass('tabActiveHeader');
$('#tabpage_' + current).hide();

var ident = this.id.split("_")[1];
//add class of activetabheader to new active tab and show contents
$(this).addClass("tabActiveHeader");
$('#tabpage_' + ident).fadeIn();
this.parentNode.setAttribute("data-current",ident);
于 2012-04-24T05:12:37.673 に答える