"활성화 된"클래스에 따라 페이딩 div가 들어오고 나가기

이것은 이전 질문 인 here과 관련이 있습니다."활성화 된"클래스에 따라 페이딩 div가 들어오고 나가기

4 개의 div (절대 인덱스가 절대)가 보이지 않게 (페이드 아웃) 시작하고, 링크를 클릭하면 관련 div가 페이드 인합니다. 동일한 링크를 클릭하면 관련 div가 사라집니다 아웃. 다른 링크를 클릭하면 첫 번째 div가 사라지고 두 번째 div는 페이드 인됩니다.

이 4 개의 절대 div 위에 "covering"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>

출처

2010-03-02 circey

당신은 큰

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

출처

2010-03-02 05:45:10 coder

토글 사용해야합니다. 좀 더 구체적 일 수 있습니까? 더 구체적인 의미에서 – circey

? 너는 그것을 파고 들었다. 나는 당신이 그것을 작동시킬 것이라고 확신합니다. – coder

"활성화 된"클래스에 따라 페이딩 div가 들어오고 나가기

답변

관련 문제