1

私は次のHTMLを持っています:

<div class="headings">
  <h1 class="one seleced"><a href="#">One</a></h1>
  <h1 class="two"><a href="#">Two</a></h1>
  <h1 class="three"><a href"#">Three</a></h1>
</div>
<div class="paragraphs">
  <p class="one">Hello One</p>
  <p class="two">Hello Two</p>
  <p class="three">Hello Three</p>
</div>

（または同様のもの）。これらの目的を念頭に置いて jQuery 関数を設定したいと思います。

  1. ドキュメントが読み込まれると、選択した見出しに対応するものを除くすべての段落が非表示になります。したがって、最初は段落 1 以外のすべてになりますが、別の見出しと段落を追加した場合に jQuery コードを変更する必要がないように、コードを一般的なものにしたいと考えています。

2a. 見出し foo がクリックされると、見出し foo 以外のすべてに「selected」クラスが適用されるため、見出し foo のみが「selected」のクラスを持ち、css を介して foo 要素のスタイルを設定するために使用されます。

2b. 見出し foo (たとえば 2 番目) をクリックすると、対応する段落 (この場合は 2 番目) のみが表示されます。

私は次のようなものが欲しい：

  $(document).ready(function() {
    $(".headings a").onClick(function() {
      $this.addClass("selected");
      others().removeClass("selected");
    }

    var selectionIndex = $(".headings").nForChildWithClass("selected");
    $(".paragraphs").not(childAtIndex("n")).hide();
    $(".paragraphs").(childAtIndex("n")).show();

  });

望ましい結果を達成する方法についてご意見をお寄せいただきありがとうございます。

4

4 に答える 4

1

ここに簡単なものがあります.DEMO http://jsfiddle.net/yeyene/b5Sde/

Jクエリ

$(document).ready(function(){
    $('.paragraphs p.'+$('h1.selected a').attr('target')).show();
    $('.headings h1 a').on('click', function(){
        $('.paragraphs p').hide();
        $('.paragraphs p.'+$(this).attr('target')).show();
    });
});
于 2013-06-21T10:29:39.960 に答える