2010-06-11 129 views
0

我正在某種畫廊工作。發現很酷的現成解決方案,但我想做一些修改,我卡住了。隱藏問題/顯示在jquery

http://www.rareclips.ayz.pl/test/

如何,我想這個工作: 當你點擊和形象應該改變右邊的圖像,使隱藏div的可見之一。

問題是,我必須隱藏頁面加載的所有div,並且只顯示圖像點擊此隱藏div內的特定div。

<script type="text/javascript"> 
$(document).ready(function(){ 

//Larger thumbnail preview 

$("ul.thumb li").hover(function() { 
$(this).css({'z-index' : '10'}); 
$(this).find('img').addClass("hover").stop() 
    .animate({ 
    marginTop: '-110px', 
    marginLeft: '-110px', 
    top: '50%', 
    left: '50%', 
    width: '200px', 
    height: '200px', 
    padding: '5px' 
    }, 200); 

} , function() { 
$(this).css({'z-index' : '0'}); 
$(this).find('img').removeClass("hover").stop() 
    .animate({ 
    marginTop: '0', 
    marginLeft: '0', 
    top: '0', 
    left: '0', 
    width: '150px', 
    height: '150px', 
    padding: '10px' 
    }, 400); 
}); 

//Swap Image on Click 

$("ul.thumb li a").click(function() { 

    var mainImage = $(this).attr("href"); //Find Image Name 
       $("#main_view img").attr({ src: mainImage }); 

       return false; 
}); 


}); 
</script> 

<script type="text/javascript"> 
$(document).ready(function() { 
//  $('#slickbox').hide(); 
     $('a.slick-toggle').click(function() { 

     var dataID = $(this).attr("data-id"); 
     $('#slickbox').hide(); 
     $("#slickbox.div[data-id=" + dataID + "].slickbox").show('slow'); 
     return false; 
    }); 
}); 
</script> 

</head><body> 
<div class="container"> 

<ul class="thumb"> 
<li><a class="slick-toggle" href="./index_pliki/max1.jpg" data-id="1"><img src="./index_pliki/min1.jpg" alt="" /></a></li> 
<li><a class="slick-toggle" href="./index_pliki/max2.jpg" data-id="2"><img src="./index_pliki/min2.jpg" alt="" /></a></li> 
<li><a href="./index_pliki/max3.jpg" data-id="3"><img src="./index_pliki/min3.jpg" alt="" /></a></li> 
<li><a href="./index_pliki/max4.jpg" data-id="4"><img src="./index_pliki/min4.jpg" alt="" /></a></li> 
</ul> 

<div id="main_view"> 

     <a href="index.htm" id="slick-up"><img src="index_pliki/max1.jpg" alt=""/></a> 
<small style="float: right; color: rgb(153, 153, 153);"> 
         </small> 
</div> 

<div id="wiecej">  

<div id="slickbox"> 

<a id="someID" class="slick-toggle" data-id="1" href="#">Show/Hide</a> 
<div id="someOtherID" class="slickbox" data-id="1" style="display: none;"> 
    1 
</div> 

<a id="someID" class="slick-toggle" data-id="2" href="#">Show/Hide</a> 
<div id="someOtherID" class="slickbox" data-id="2" style="display: none;"> 
    2 
</div> 

</div> 
+0

歡迎之間SO,請訪問http://stackoverflow.com/faq – Reigel 2010-06-11 08:56:15

回答

0

你不能把事情的隱藏元素中可見:

$('#slickbox').hide(); 

這個隱藏在div id爲slickbox和所有它的孩子。 更改您單擊處理程序是這樣的:

$(document).ready(function() { 
    $('a.slick-toggle').click(function() { 
    var dataID = $(this).attr("data-id"); 
    $('#slickbox div.slickbox').hide(); 
    $("#slickbox div[data-id=" + dataID + "].slickbox").show('slow'); 
    return false; 
    }); 
}); 

,並注意漏點#slickbox div

+0

感謝快速回答,就像一個魅力:) – nonab 2010-06-11 09:30:07