帮助建立一个与jQuery的部分导航菜单
问题描述:
我真的可以使用一些帮助,我有一种感觉会是一些非常基本的jQuery,但我都卡住了。帮助建立一个与jQuery的部分导航菜单
我有一个未知的(动态生成)数量的div在我的html每一类的“页”。
我想要做的是为每个div.page添加一个id,然后用包含锚的href值为#page_n (即值其相应的div id)的
我希望我的输出看起来像这样:
<div class="page" id="page_1">
...content...
</div>
<div class="page" id="page_2">
...content...
</div>
.....
<div class="page" id="page_n">
...content...
</div>
<ul #menu>
<li><a href="#page_1">Page 1</a></li>
<li><a href="#page_2">Page 2</a></li>
.....
<li><a href="#page_n">Page n</a></li>
</ul>
我添加了ID的还好用:
$('li.page').each(function(index){$(this).attr("id", "page_" + (index+1));
});
但我与挣扎秒我的问题的一部分。我知道这可能是有点基本的,但我刚刚开始....提前
感激地收到任何帮助...谢谢...
答
如果你的HTML最初看起来是这样的:
<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>
这个jQuery代码:
$(document).ready(function() {
$('div.page').each(function(i) {
var x = i+1;
var id = 'page_' + x;
$(this).attr('id', id);
var li = $('<li/>').append(
$('<a/>').attr('href', '#' + id).html('Page ' + x)
);
$('#menu').append(li);
});
});
会让你的HTML看起来像这样:
<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
<li><a href="#page1">Page 1</a></li>
<li><a href="#page2">Page 2</a></li>
<li><a href="#page3">Page 3</a></li>
</ul>
+0
欢呼声谢谢! – 2009-02-20 22:15:08
我想你的意思是$('div.page'),每个 – 2009-02-20 22:10:40