如何获取 header 中菜单的元素 ID?
How to get ids of elemenent for menu in header?
我正在编辑 wordpress 主题。 (这个:Onetone theme)
我正在尝试制作一些页面,如看到主题的主页不提供(我已经联系过他们)。
因此,在每个页面中,我都会有一些具有特定 ID 的 和一个带有 link 的菜单。
我已经证明了:
<?php
$sections = array('home','A','B','C','D');// home,A,B,C,D are the ids of the section added manually
foreach ($sections as $section) {
echo '<li class="onetone-menuitem"><a class="onetone-menu-link" id="onetone-menu-'.$section.'" href="#'.$section.'" >
<span>'.$section.'</span></a></li>';
}?>
但是如您所见,我无法以编程方式获取这些部分的 ID。
我该怎么做?谢谢
使用 jQuery 提取部分 ID,这里是一个基本的工作示例,可帮助您入门。您可以将此代码粘贴到 php 或 html 文件中,然后从浏览器中调用它。您唯一需要更改的是 jquery.js
.
的位置
<!doctype html>
<head>
<script type='text/javascript' src='http://localhost/lccs/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<style>
.menu-item
{
display: inline-block;
padding: 1em;
background-color: #444;
}
</style>
<script language="javascript">
jQuery(document).ready(function($)
{
$("section").each(function()
{
var menucode="<span class='menu-item'><a href='#"+this.id+"'>Item</a></span>";
$("#menu-items").append(menucode);
console.log(menucode);
});
});
</script>
</head>
<body>
<main id="main" class="site-main" role="main">
<aside class="menu-aside">
<h4>Menu</h4>
<span id="menu-items"></span>
</aside>
<article class='student type-student status-publish hentry'>
</article>
</main>
<h1>Heading</h1>
<section id="seca-1"><h2>Section A</h2>
</section>
<section id="seca-2"><h2>Section B</h2>
</section>
<section id="seca-3"><h2>Section C</h2>
</section>
<section id="seca-4"><h2>Section D</h2>
</section>
</body>
</html>
我正在编辑 wordpress 主题。 (这个:Onetone theme)
我正在尝试制作一些页面,如看到主题的主页不提供(我已经联系过他们)。
因此,在每个页面中,我都会有一些具有特定 ID 的
我已经证明了:
<?php
$sections = array('home','A','B','C','D');// home,A,B,C,D are the ids of the section added manually
foreach ($sections as $section) {
echo '<li class="onetone-menuitem"><a class="onetone-menu-link" id="onetone-menu-'.$section.'" href="#'.$section.'" >
<span>'.$section.'</span></a></li>';
}?>
但是如您所见,我无法以编程方式获取这些部分的 ID。 我该怎么做?谢谢
使用 jQuery 提取部分 ID,这里是一个基本的工作示例,可帮助您入门。您可以将此代码粘贴到 php 或 html 文件中,然后从浏览器中调用它。您唯一需要更改的是 jquery.js
.
<!doctype html>
<head>
<script type='text/javascript' src='http://localhost/lccs/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<style>
.menu-item
{
display: inline-block;
padding: 1em;
background-color: #444;
}
</style>
<script language="javascript">
jQuery(document).ready(function($)
{
$("section").each(function()
{
var menucode="<span class='menu-item'><a href='#"+this.id+"'>Item</a></span>";
$("#menu-items").append(menucode);
console.log(menucode);
});
});
</script>
</head>
<body>
<main id="main" class="site-main" role="main">
<aside class="menu-aside">
<h4>Menu</h4>
<span id="menu-items"></span>
</aside>
<article class='student type-student status-publish hentry'>
</article>
</main>
<h1>Heading</h1>
<section id="seca-1"><h2>Section A</h2>
</section>
<section id="seca-2"><h2>Section B</h2>
</section>
<section id="seca-3"><h2>Section C</h2>
</section>
<section id="seca-4"><h2>Section D</h2>
</section>
</body>
</html>