尝试创建一个导航菜单,其中包含指向页面上每个<h2>标题的链接

时间:2017-12-21 11:48:41

标签: javascript php jquery wordpress

我尝试使用jQuery创建导航菜单,其中包含指向在Wordpress中创建和发布的页面上的每个<h2>标题的链接。其中一些页面可能会有点冗长,因此这个导航菜单可以让访问者快速轻松地跳转到其内容的某些部分。

我已将其设置为使每个<h2>标题通过使用前缀为&#34;#&#的内容创建自己的唯一ID 34; (即&#34;我的标题&#34; 将获得ID &#34; #My title&#34; )使用此片段代码如下:

jQuery("h2").each(function(){
      var id = jQuery(this).html();
      jQuery(this).attr("id", "#" + id);
})

基本上是第1步(共10步)。剩下的是创建一个函数,该函数循环遍历页面上存在的每个<h2>,然后为每个标题创建一个菜单项。我有点理解javascript循环,但我不知道如何让它实际创建这样的新元素。

我还是新手,当涉及到Javascript甚至是jQuery时,如果有什么不清楚,我会道歉。

无论如何,我希望有人能指出我正确的方向。任何帮助将非常感激。

1 个答案:

答案 0 :(得分:0)

根据我的理解,我猜你正在尝试在页面顶部创建一个导航菜单,它会创建指向每个Menu menu = navView.getMenu(); // navView is NavigationView reference. menu.add("Item 1"); menu.add("Item 2"); menu.add("Item 3"); 子标题的链接。

我真的不知道wordpress是如何工作的,但是这里有一些方法可以在jquery中实现:

您应该将<h2>元素存储在数组中。您可以通过在制作时添加ID来完成此操作。你不需要循环! (另外,如果我是你,我不会在ID之前添加#,因为当你尝试在javascript或css中调用ID时,你必须写“## name”。)

<h2>

现在您已拥有var arr = []; $("h2").each(function(){ var id = $(this).html(); $(this).attr("id", id); arr.push($(this).attr('id')); }); 元素的数据,您可以循环浏览它以创建列表。首先,只需在javascript中创建一个空<h2>。然后,您可以继续在其中添加<ul id="nav"></ul>与h2内容。要添加链接,您只需使用<li></li>包围文本。

所以结果会是这样的:

<a href='#name'></a>

当然,您可以使用css来设置无序列表的样式,它可以用作导航。 我希望有所帮助!