如何在用户选择之间使标签淡出？ （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>）。