アンカーの要素を非表示にする別のコンテナをクリック

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"); 
}); 

これは機能しません...任意のアイデアですか？あなたはdivのための共通の命名規則などのようなリンクを使用する必要が

Answer 1

：

<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オーダーを同じに保つ必要があります：