從圖像旋轉木馬到產品頁上的切換div的錨鏈接

Question

我是JS的新手，並且知道HTML/CSS的一點點，所以任何幫助都非常感謝。我得到了一個星期的時間來發布我的網站在服務器上

我得到的東西工作，我喜歡。它擴大/崩潰得很好，我對結果感到滿意。我面臨的問題是，我在我的網站上有一個圖像傳送帶，並希望將其鏈接到div。

例如：當訪問者點擊image2時，它應該去測試2並且測試1應該被摺疊。

HTML代碼

<p class="trigger"><a href="#!">Test1</a></p> 
<div class="toggle_container" id="1"> 
<div class="block"> 
    <p>Contents of test1 to be displayed</p>   
</div> 
<div> 
<p class="trigger"><a href="#!">Test2</a></p> 
<div class="toggle_container" id="2"> 
<div class="block"> 
    <p>Contents of test2 to be displayed</p>   
</div> 
<div> 

CSS

p.trigger{ 
margin-bottom:7px; 
margin-top:-5px; 
color: #545454; 
text-decoration: none; 
} 

.toggle_container{ 
margin-bottom:10px; 
} 

.toggle_container p{ 
margin:0px; 
text-decoration: none; 
} 

.toggle_container{ 
background:#f0f0f0; 
clear: both; 
font-size:100%; 
} 

p.trigger a { 
color: #545454; 
text-decoration: none; 
} 

p.trigger a:link, p.trigger a:visited { 
color: #545454; 
text-decoration: none; 
} 

p.trigger a:hover, p.trigger a:active { 
color: #ff00ff; 
} 

的Javascript

$(document).ready(function() { 
$(".toggle_container:not(:first)").hide(); 

$("p.trigger").on('click', function(){ 
$('.toggle_container').slideUp().eq($(this).index('p.trigger')).stop().slideToggle(); 
return false; 
}); 

有沒有大量的搜索，並試圖很多代碼，但沒有爲我工作。請幫忙！！！謝謝

http://jsfiddle.net/bL9Le/似乎沒有工作，但在網站上工作。

Answer 1

我找到了我的解決方案。只是爲了幫助他人，這裏是代碼

<script> 
window.onload = function() { 
    var hash = window.location.hash; 
    if (hash != "") { 
     var id = hash.substr(1); 
     $(".toggle_container:not(:active)").hide(); 
     document.getElementById(id).style.display = 'block'; 
    } 
} 
</script> 

Answer 2

你在那個小提琴中犯了幾個錯誤。你的div沒有關閉，jQuery沒有被選中在小提琴中使用。 Check this out as an alternative solution.

$(document).ready(function() 
{ 
    $(".toggle_container").hide(); 

    $(".trigger").on('click', function(e) 
    { 
     $('.toggle_container').slideUp(500, function() 
     { 
      $(e.target).next('.toggle_container').slideDown(500); 
     }); 
     return false; 
    }); 
});