Question

这与我之前的问题here有关。

我希望4个div（z-index绝对值）从不可见（淡出）开始，当点击链接时，相关的div淡入。当点击相同的链接时，相关的div淡出。单击其他链接时，第一个div淡出，第二个div淡入。

在这4个绝对div上有一个“覆盖”div（“#contents_screen”）。这可能会形成我的“主页”页面，所以尽管看起来没有任何目的，但它仍然是必需的。

我在一定程度上工作，但没有雪茄。我很感激一些帮助。非常感谢你的期待！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
#contents {
    width:500px;
    margin:auto;
    height:400px;
    border:1px solid black;
    position:relative;
}
#contents_screen {
    position:absolute;
    width:500px;
    height:400px;
    background:#fff;
    z-index:50;
}
#contents_folio, #contents_services, #contents_about, #contents_contact {
    position:absolute;
    width:500px;
    background:#fff;
    color:#333;
    z-index:20;
}</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function(){   
$("a.rollover").fadeTo(1,0.5);
$(".screen").fadeTo(1,0);                   
function identify_active(){
    var activeID = $(".active").attr("id");
    var active_screen;
        $("#contents_screen").fadeTo(1,1);
        $(active_screen).fadeTo(1,0);    

        if (activeID=="folio") {
            active_screen="contents_folio";} 
            else {      
            if (activeID=="services") {
                active_screen="contents_services";}
                else {
                if (activeID=="about") {
                    active_screen="contents_about";}
                    else  {
                    if (activeID=="contact") {
                        active_screen="contents_contact";
        }}}}
    $(active_screen).fadeTo(1,1);   
    $("#contents_screen").fadeTo(1,0);
    }
$("a.rollover").hover(
    function(){$(this).fadeTo("fast",1);},
    function(){

    if(!$(this).hasClass('active')) {
        $(this).fadeTo("fast",0.5);}
    });
$("a.rollover").click(function(){
   if($('.active').length > 0) {    
            if($(this).hasClass('active'))
            {
                $(this).removeClass("active");
                $(this).fadeTo("fast",0.5);
            } else {
                $(".active").fadeTo("fast",0.5);
                $(".active").removeClass("active");
                $(this).addClass("active");
                $(this).fadeTo("fast",1);
                identify_active();
            }
        } else {
                $(this).addClass("active");
                $(this).fadeTo("fast",1);
                identify_active();
        }
        return false;
    });
});
</script>
</head>

<body>
<div id="stage">

<div id="menu">
<ul id="menu">
<li><a class="rollover" id="folio" href="#">folio</a></li>
<li><a class="rollover" id="services" href="#">services</a></li>
<li><a class="rollover" id="about" href="#">about</a></li>
<li><a class="rollover" id="contact" href="#">contact</a></li>
</ul>
</div>

<div id="contents">
<div id="contents_screen">screen</div>
<div id="contents_folio" class="screen">folio</div>
<div id="contents_services" class="screen">services</div>
<div id="contents_about" class="screen">about</div>
<div id="contents_contact" class="screen">contact</div>
</div><!--contents-->
</div><!--stage-->
</body>
</html>

Answer 1

你应该使用切换

http://api.jquery.com/toggle/

根据“活跃”类，淡入淡出div

1 个答案: