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：

这个 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 回答
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 回答