4

たくさんのdivがある大きなページがあり、これらのdivはすべて1つのdivで囲まれています。そして、私が持っている囲まれたdivの合計に等しい数のリンクがページの上部にあります。今、私がやりたいのは、番号をクリックして、その番号に対応するdivのみを表示し、他のすべてを非表示にすることです。

links--> 1 2 3 4 5 6 7 .....
<div id="all">
  <div id="mail1">..........</div>
  <div id="mail2">..........</div>
  <div id="mail3">..........</div>
  <div id="mail4">..........</div>
  <div id="mail5">..........</div>
  <div id="mail6">..........</div>
  .....and so on
</div>

HTML内で行う必要があり、そのHTMLは保存され、オフラインでも表示される可能性があるため、ここではjqueryを使用できません。javascript自体を使用してそれを行う必要があります。

誰かがここでjavascriptコードを手伝ってくれませんか......。

4

3 に答える 3

3 
<script type="text/javascript">
    var divIds = ["mail1", "mail2", ..., "mailn"];
    function showDiv(showId) {
         for(var i = divIds.length; i--; ) {
              if(divIds[i] === showId)
                  document.getElementById(showId).style.display = "block";
              else
                  document.getElementById(divIds[i]).style.display = "none";
         }
    }
</script>

次に、上部のリンクは次のようになります。

<a href="#" title="Show Mail 1" onclick="showId('mail1');">1</a>

それをテストしていませんが、それはアイデアです。欠点は、コード内の3つの場所でdivを維持する必要があることです

  1. var divIdsアレイ内。
  2. htmlタグ自体。
  3. 上部のリンク。

いくつかのjavascriptを記述して、3つすべてを生成し、そのメンテナンス部分を完全に取り除くことができます。

<script></script>オフラインドキュメントでjQueryを使用する場合、おそらく、タグ内のドキュメント自体にjquery.min.jsファイルのテキストを含めるのが最善の方法です。そうすれば、パスなどについて心配する必要はありません。

于 2012-07-29T15:27:46.913 に答える
2

あなたはそのようなことをするかもしれません（jsコーディングスタイルで私を判断しないでください、私はjs忍者ではありません）：

window.onload = function() {
    var outer = document.getElementById("all");

    for (var i=0; i < outer.childNodes.length; i++) {
        outer.childNodes[i].addEventListener("click", doSomething);
    }

    function doSomething() {
        // here you can run loop for changing display style for you divs
        console.log(this.id);
    }
}
于 2012-07-29T15:26:48.610 に答える
2

div idを知らなくても、目立たない例を作成しました。

http://jsfiddle.net/8pQzx/2/

より多くのコードですが、これはjslibを使用したくない場合に得られるものです。;）

于 2012-07-29T15:39:40.773 に答える