1

jQueryを使用してIDとhrefをインクリメントしたリストを作成したいと思います。これは可能ですか？

<ul id="links">
  <li><a href="#item1">Item number 1</a></li>
  <li><a href="#item2">Item number 2</a></li>
  <li><a href="#item3">Item number 3</a></li>
  <li><a href="#item4">Item number 4</a></li>
  <li><a href="#item5">Item number 5</a></li>
</ul>

<div id="toShow">
    <div id="item1" style="display:block;"></div>
    <div id="item2" style="display:none;"></div>
    <div id="item3" style="display:none;"></div>
    <div id="item4" style="display:none;"></div>
    <div id="item5" style="display:none;"></div>
</div>

これらのリストアイテムはループを介して生成され、このプラグインを使用したいと思いますhttp://www.bijusubhash.com/demo/show-hide-a-div-at-a-time-with-jquery/

ありがとう、デビッド

4

2 に答える 2

1

私は次のように推測できます。実際に必要なものは、思っているよりもはるかに単純です。

デモリンク

HTML :(はい、カスタムIDの混乱はありません）

<ul id="links">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<div id="toShow">
    <div>First element</div>
    <div>Second element</div>
    <div>Third element</div>
    <div>Fourth element</div>
    <div>Fifth element</div>
</div>

そして、いくつかのjQuery行：

$('#toShow>div:gt(0)').hide(); // hide all but first
$('#links li').on('click',function(e){
    $('#toShow>div:eq('+$(this).index()+')').show(1700).siblings('div').stop(1).hide(1700);
    return false;
});

詳細： http：
//api.jquery.com/

于 2012-05-08T14:53:49.767 に答える
1

HTML：

このdivには、生成されたアイテムが含まれます。それらのリストを他の場所に追加できます。

<div id="container"></div>

jQuery：

var ul = $('<ul id="links"></ul>'),  // creates an ul
        div = $('<div id="toShow"></div>'); // creates a div

    for(var i = 1; i <= 5; i++) { // loop for add item (suppose five items)
      ul.append('<li id="list_'+ i +'"><a href="#item'+ i +'">Item number '+ i +'</a></li>');
      div.append('<div id="item'+ i +'" style="display:block;">Item '+ i +'</div>');
    }

    $('#container').append(ul, div); // append those ul and div to document give life

デモ

于 2012-05-08T13:47:28.070 に答える