jquery make divをクリックしたときに表示される。

#tabs-1 { 
    display: none; 
}  

#tabs-2 { 
    display: none; 
} 

#tabs-3 { 
    display: none; 
} 

<script type="text/javascript">  
     $(document).ready(function() { 
      $(this).click(function() {  
       var a = $(this).find("a").attr("href"); 
       $(a).show(); 
      }); 
     }); 
</script> 

<body> 
<form id="form1" runat="server"> 
    <div class="tabs"> 
    <ul> 
     <li><a href="#tabs-1">Nunc tincidunt</a></li> 
     <li><a href="#tabs-2">Proin dolor</a></li>    
    </ul> 
    <div id="tabs-1"> 
     <h2>Content heading 1</h2> 
     <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Doin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p> 
    </div> 
    <div id="tabs-2"> 
     <h2>Content heading 2</h2> 
     <p>Morbi tfhgdfahsdh</p> 
    </div> 
    </div>  
</form> 
</body>

私は、順序付きリストのahrefをクリックするとこれらのdivが表示されるようにする簡単なjqueryスクリプトを作成しようとしています。このコードを実行すると、常に順序付きリストの最初の要素が表示されます。ハイパーリンクにリンクされている要素を表示したい。jquery make divをクリックしたときに表示される。

出典

2012-01-09 Chris Stewart

は

$('div.tabs > ul > li > a').click(function(e) { 
    var id = this.getAttribute('href'); 
    $(id).toggle(); 
    e.preventDefault(); 
});

次これが問題のアンカータグを選択するセレクタdivs.tabs ul li aを使用し、それらにクリックハンドラを追加してみます。クリックすると、非表示にする必要のあるDOM要素のIDとしてhref属性が使用されます。 http://jsfiddle.net/AWPFJ/3/

出典

2012-01-09 19:55:40 JaredPar

どのように私は別のタブをクリックしたときに、それは再び非表示になるだろうか？ –

私は.tabsクラスの子であるすべてのアンカータグを取得するために、セレクタを使用します。e.preventDefault()ラインはそれにs href`

フィドルをナビゲートしようとすることになるデフォルトの動作だからアンカーを防止します。クリック関数内では、クリックした要素を参照するためにこれを使用し、href属性の値を取得します。その値はセレクタとして使用され、正しいdivが表示されます。クリック機能はイベントをパラメータとして受け取り、ブラウザがリンクをたどらないように.preventDefault()で使用できます。要するに

$(document).ready(function() { 
    $("div.tabs ul li a").click(function (event) { 
     var id = $(this).attr("href"); 
     $(id).show(); 
     event.preventDefault(); 
    }); 
});

出典

2012-01-09 19:56:33

これは、ページのコンテンツセクション内に現れたアンカータグにもハンドラを追加します。私はそれが潜在的な影響を制限するためにセレクターをより具体的にするだろう – JaredPar

@ JaredPar合意した、私はこれをもっと例として考えた。彼はおそらく自分のナビゲーションコンテナにIDを追加して、そのIDを使って選択することをお勧めします。しかし、私の例では、セレクタを少し具体的に更新しました。 –

、これは実行する必要があります。

$(".tabs").find("a").click(function() { 
    $($(this).attr("href")).show(); 
    return false; 
})

をあなたはすべてのタブに「タブ」クラスを追加し、同様に以下を追加する必要があります

$(".tabs").find("a").click(function() { 
    $(".tab").hide(); 
    $($(this).attr("href")).show(); 
    return false; 
})

出典

2012-01-09 19:59:21

2番目のコードは何をしますか？ –

すべてのタブを非表示にしてから必要なタブを表示しますが、すべてのタブにclass = "タブ"を追加する必要があります。 –

何らかの理由で、デフォルトのタブ（ページの読み込み時に最初に読み込まれる要素）で正しく動作していないため、最初に表示された後、クリックされたときに再度表示されません。 –

スクリプトためだことドキュメント全体でクリックハンドラを設定しており、その結果として最初のものが常に選択されています。 < >要素または親<li>自体のクリックハンドラを設定し、href属性値に対応するDIVを取得し、そのDIVでshow（）メソッドを呼び出すようにスクリプトを変更します。私がテストする機会を持っていないが、それはこのようなものになるだろう：

$(document).ready(function() { 
    $('a').click(function() { 
     var a = $(this).attr("href"); 
     $(a).show(); 
    }); 
});

HTH、のAshwin

出典

2012-01-09 20:02:40

jquery make divをクリックしたときに表示される。

答えて

関連する問題