Question

我有一些javascript，点击3个标签中的1个，在3个div之间切换。

这是我的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);

我似乎无法修改这个以接受褪色效果。或者也许有更好的方法来做到这一点？

会爱你的帮助！谢谢。

Answer 1

这并不容易，因为你做不到。你需要拆分两个css语句。

不透明度的新div：0，显示：无将显示更改为阻止然后使用setTimeout更改不透明度（即使延迟10毫秒也可以）。

对隐藏的div做相反的事情。

类似的东西：

var newdiv=document.getElementById("tabpage_" + ident);
newdiv.style.display="block";
setTimeout(function(){newdiv.style.opacity="1";},10);

Answer 2

好的，在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);

在Javascript中淡化对display =“block”动作的影响

2 个答案: