This is related to my previous question here.
I want 4 divs (absolute with z-indexes) to start off as being invisible (faded out), and when a link is clicked, the related div fades in. When the same link is clicked, the related div fades out. When a different link is clicked, the first div fades out and the second div fades in.
There is a “covering” div (“#contents_screen”) over these 4 absolute divs. This will probably form my “home” page, so it is required despite seemingly having no purpose.
I got it working to a certain extent, but no cigar. I’d appreciate some help. Thank you very much for looking!
<!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>
you should use toggle
http://api.jquery.com/toggle/