duanaozhong0696
2015-02-07 17:11
浏览 37
已采纳

如何在标题中获取菜单元素的ID?

I'm editing a wordpress theme. (this: Onetone theme) I'm trying to make some pages like the home seeing the theme don't provide it (I've already contacted them). So in each page i would have some < section > with a specific id and a menu with the link for each of them.

I've already make a proof:

<?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>';
}?>

But as you can see,I was not able to get programmatically the ids of the sections. How can i do it? Thanks.

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

1条回答 默认 最新

  • dqdtgiw4736 2015-02-08 08:29
    已采纳

    Using jQuery to extract the section id's, here is a basic working example to get you started. You canpaste this code in a php or html file and call it from your browser. The only thing you will need the change is the location of 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>
    
    点赞 打赏 评论

相关推荐 更多相似问题