1

我有一些 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);

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

很想得到你的帮助！谢谢你。

4

2 回答 2

0

这并不容易，因为你做不到。您需要拆分两个 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

好的，在 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 回答