顯示隱藏在錨點上的元素點擊不同的容器

Question

我需要顯示一堆不同的閃光橫幅。最好的我可以計算是隱藏它們，那麼標題點擊

<!-- list that holds links --> 
<ul id="bannerList" class="list"> 
    <li>Type 
     <ul> 
      <li><a href="#">Flash banner1 120x600</a></li> 
     </ul> 
    </li> 

    <li>Other Type 
     <ul> 
      <li><a href="#">Flash banner2 120x600</a></li> 
     </ul> 
    </li> 
</ul> 

<div id="bannerTarget"> 
    <div class="vert">alpha</div> 
    <div class="horiz">one</div> 
    <div class="horiz">two</div> 
    <div class="horiz">three</div> 
    <div class="horiz">four</div> 
</div> 

#bannerTarget .vert { 
width: 120px; 
height: 600px; 
margin: 0 auto; 
float: left; 
display: none; 
} 

#bannerTarget .horiz { 
width: 728px; 
height: 90px; 
margin: 0 auto; 
float: left; 
display: none; 
} 

我不想寫一個點擊功能爲每個鏈接，以顯示其相應的div時表示，我將如何讓功能更實用？我遇到問題連接鏈接到它適當的div

$("ul#bannerList li a").click(function(e) { 
    e.preventDefault(); 
    $parent.addClass("selected").siblings().removeClass("selected"); 
    var href = $(this).attr('href'); 
    $href.css("display","block"); 
}); 

這不工作...任何想法？

Answer 1

您需要使用的div和命名規範，像這樣的鏈接：

<ul id="bannerList" class="list"> 
    <li>Type 
     <ul> 
      <li><a href="#" id="link-1">Flash banner1 120x600</a></li> 
     </ul> 
    </li> 

    <li>Other Type 
     <ul> 
      <li><a href="#" id="link-2">Flash banner2 120x600</a></li> 
     </ul> 
    </li> 
</ul> 

<div id="bannerTarget"> 
    <div class="vert" id="div-1">alpha</div> 
    <div class="horiz" id="div-2">one</div> 
    <div class="horiz" id="div-3">two</div> 
    <div class="horiz" id="div-4">three</div> 
    <div class="horiz" id="div-5">four</div> 
</div> 

您的代碼就變成了：

$("ul#bannerList li a").click(function(e) { 
    e.preventDefault(); 
    $('#bannerTarget > div').hide(); 
    var id = $(this).attr('id').replace('link-',''); 
    $('#div-'+id).show(); 
}); 

您也可以達到同樣的不使用的ID，但你需要保持鏈接順序和div訂單相同：

$("ul#bannerList li a").click(function(e) { 
    e.preventDefault(); 
    $('#bannerTarget > div').hide(); 
    var link_index = $(this).parent().index(); 
    $('#bannerTarget > div').each(function(){ 
     if($(this).index() == link_index){ 
      $(this).show(); 
     } 
    }); 
});