0

選択したリンク (iframe でページを開く) にクラスを追加し、別のリンクが選択されたときにそのクラスを削除する関数を jQuery で作成しようとしています。以前、ここで別のメンバーから同様のタイプのヘルプを受け取りましたが、それにはラジオ ボタンとテーブルが含まれていました。

しばらく遊んでみましたが、jQuery はまだ慣れていないのでよくわかりません。

基本的に、3 ～ 4 個のリンク グループが含まれており、ユーザーが選択したこのコンテナー内<div id="CollapsiblePanelContent"> ... </div>のタグにスタイルを追加したいと考えています。<a>

どんな助けでも大歓迎です。ありがとうございました。

<div id="CollapsiblePanelContent">  
  <a href="page1.asp" onclick="return handlelink(this)">Link1</a>
  <a href="page2.asp" onclick="return handlelink(this)">Link2</a>
  <a href="page3.asp" onclick="return handlelink(this)">Link3</a>
  <a href="page4.asp" onclick="return handlelink(this)">Link4</a>
</div>

<script type='text/javascript'>
  $(function() {
    $('div').click(function(event) {
      $(this).closest('.CollapsiblePanelContent').addClass('selected').parent().siblings().each(function() {
        $(this).find('.CollapsiblePanelContent').removeClass('selected');
      });
    });
  });
</script>
4

3 に答える 3

3 
$('#CollapsiblePanelContent a').on('click', function(e){
  e.preventDefault(); // prevent page reload, you may remove it if don't need
  $(this).addClass('selected').siblings().removeClass('selected');
});

CollapsiblePanelContentそのままでは、id正しいセレクターはあり#CollapsiblePanelContentません.CollapsiblePanelContent。

ただし、CollapsiblePanelContentfor 複数divの を使用する場合は、代わりにselectorを使用idする必要があります。複数の要素が同じ を持つことができるためです。class.CollapsiblePanelContentid

于 2012-07-07T17:09:38.077 に答える
1

あなたが試すことができます ：

function handlelink(this)
{
$(this).siblings().removeClass('selected');
$(this).addClass('selected');
//do the rest with the click
}
于 2012-07-07T17:09:00.930 に答える
0

提供した HTML に基づいて、次のように動作するはずです。

$(function() {
    $('.CollapsiblePanelContent a').click(function() {
        $(this).addClass('selected').siblings().removeClass('selected');
    });
});

これにより、クリック イベント ハンドラーが<a>内の任意の要素にバインドされ、クリックされたリンクにクラス<div class="CollapsiblePanelContent">が追加さselectedれ、すべての兄弟から同じクラスが削除されます。

于 2012-07-07T17:08:48.590 に答える