如何使标签在用户选择之间淡出？ (jQuery)

Question

我有一个 div，上面有两个选项卡，由 Javascript 运行。现在，当用户将鼠标悬停在选项卡上时，div 的内容会立即切换到选项卡的内容。我已经在网站上安装了 JQuery，并且希望使用它，以便在用户选择新选项卡时选项卡的内容在彼此之间淡出。

请帮助我使用 JQuery 淡化功能使标签的内容在彼此之间淡化。谢谢！

HTML：

<div class="tab_menu_container">
        <ul id="tab_menu">
            <li class="first"><a rel="tab_content_secure">Connections</a></li>
            <li><a rel="tab_content_notice">Notice of Access</a></li>
        </ul>
        <div class="clear"></div>
    </div>
    <div class="tab_container">
        <div class="tab_container_in">
            <ul id="tab_content_secure" class="tab_content_list">
    Sample content for Tab #1                                   
            </ul>

            <ul id="tab_content_notice" class="tab_content_list">
    Sample content for Tab #2
            </ul>
        </div>
    </div>

Javascript：

var menuscript={
    disabletablinks: false, 
    currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), 

definemenu:function(tabid, dselected){
    this[tabid+"-menuitems"]=null
    this.addEvent(window, function(){menuscript.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
    var menuitems=this[tabid+"-menuitems"]
 for (i=0; i<menuitems.length; i++){
        menuitems[i].className=""
        if (typeof menuitems[i].hasSubContent!="undefined")
            document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
    }
    targetitem.className="current"
    if (typeof targetitem.hasSubContent!="undefined")
        document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
    var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
    return (menuscript.currentpageurl==menuurl)
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
        target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
    var menuitems=document.getElementById(tabid).getElementsByTagName("a")
    this[tabid+"-menuitems"]=menuitems
    for (var x=0; x<menuitems.length; x++){
        if (menuitems[x].getAttribute("rel")){
            this[tabid+"-menuitems"][x].hasSubContent=true
            if (menuscript.disabletablinks)
                menuitems[x].onclick=function(){return false}
        }
        else //for items without a submenu, add onMouseout effect
            menuitems[x].onmouseout=function(){this.className=""}
        menuitems[x].onmouseover=function(){menuscript.showsubmenu(tabid, this)}
        if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
            menuscript.showsubmenu(tabid, menuitems[x])
            var setalready=true
        }
        else if (parseInt(dselected)==x)
            menuscript.showsubmenu(tabid, menuitems[x])
    }
}
}

        menuscript.definemenu("tab_menu", 0)

Answer 1

您可以使用类似于this 的内容来显示/隐藏内容：

$('#tab_menu a').click(function(){
    $tabContents.filter(':visible').fadeOut();
    $tabContents.filter('#' + $(this).attr('rel')).fadeIn();    
});

请注意，我建议使用 CSS 来隐藏所有选项卡内容，但例如第一个，而不是使用 Javascript 执行此操作。 据我所知，也不推荐使用<ul> 元素作为内部没有列表元素的容器 (<li>)。