Javascript 在url中插入散列以将其转换为锚点

我正在使用Wordpress，并试图找出如何破解子菜单中的链接

我在这里设置了一个演示：

具体来说，我想在二级菜单链接前面添加一个散列，这样它们就可以成为相同的页面锚，而不是转到单独的页面

例如：

变成：

理想情况下，这可以在Wordpress中实现，但我认为使用javascript也可以

谢谢

您必须使用

在你的例子中：

在您的功能中

class custom_names extends Walker_Nav_Menu
    {

        /* Start of the <ul>
         *
         * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
         *                 So basically add one to what you'd expect it to be
         */
        function start_lvl(&$output, $depth = 0, $args = array())
        {
            $indent = str_repeat("\t", $depth);
            $output .= "\n$indent<ul class=\"children\">\n";
        }

        /* End of the <ul>
         *
         * Note on $depth: Counterintuitively, $depth here means the "depth right before we start this menu".
         *                 So basically add one to what you'd expect it to be
         */
        function end_lvl( &$output, $depth = 0, $args = array() ) {
            $indent = str_repeat("\t", $depth);
            $output .= "$indent</ul>\n";
        }

        /* Output the <li> and the containing <a>
         * Note: $depth is "correct" at this level
         */
        function start_el( &$output, $item, $depth = 0, $args = array(),  $current_object_id = 0 )
        {
            $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

            $classes = empty( $item->classes ) ? array() : (array) $item->classes;
            $classes[] = 'menu-item-' . $item->ID;

            $args = apply_filters( 'nav_menu_item_args', $args, $item, $depth );

            $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args, $depth ) );
            $class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';


            $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args, $depth );
            $id = $id ? ' id="' . esc_attr( $id ) . '"' : '';


            $output .= $indent . '<li' . $id . $class_names .'>';


            $atts = array();
            $atts['title']  = ! empty( $item->attr_title ) ? $item->attr_title : '';
            $atts['target'] = ! empty( $item->target )     ? $item->target     : '';
            $atts['rel']    = ! empty( $item->xfn )        ? $item->xfn        : '';
            $atts['href']   = ! empty( $item->url )        ? $item->url        : '';


            $atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args, $depth );

            $attributes = '';
            foreach ( $atts as $attr => $value ) {
                if ( ! empty( $value ) ) {
                    $value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
                    $attributes .= ' ' . $attr . '="' . $value . '"';
                }
                if ($depth == 1) {
                $attributes = ' ' . $attr . '="'.str_replace(basename ($item->url), '#'.str_replace(' ', '-', strtolower ($item->title)), $value).'"';
            }
            }


            $title = apply_filters( 'the_title', $item->title, $item->ID );

            $title = apply_filters( 'nav_menu_item_title', $title, $item, $args, $depth );

            $item_output = $args->before;
            $item_output .= '<a'. $attributes .'>';
            $item_output .= $args->link_before . $title . $args->link_after;
            $item_output .= '</a>';
            $item_output .= $args->after;


        $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
        }

        /* Close the <li>
         * Note: the <a> is already closed
         * Note 2: $depth is "correct" at this level
         */
        function end_el ( &$output, $item, $depth = 0, $args = array())
        {
            $output .= '</li>';
            return;
        }

        /* Add a 'hasChildren' property to the item
         * Code from: http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
         */
        function display_element ($element, &$children_elements, $max_depth, $depth = 0, $args, &$output)
        {
            // check whether this item has children, and set $item->hasChildren accordingly
            $element->hasChildren = isset($children_elements[$element->ID]) && !empty($children_elements[$element->ID]);

            // continue with normal behavior
            return parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
        }
    }

类自定义名称扩展了Walker\u导航菜单
{
/*

*
*关于$depth的注意：与直觉相反，$depth在这里表示“在我们开始这个菜单之前的深度”。
*所以基本上在你期望的基础上增加一个
*/
函数start_lvl（&$output，$depth=0，$args=array（））
{
$indent=str\u repeat（“\t”，$depth）；
$output.=“\n$indent
\n”；
}
/*

*
*关于$depth的注意：与直觉相反，$depth在这里表示“在我们开始这个菜单之前的深度”。
*所以基本上在你期望的基础上增加一个
*/
函数end_lvl（&$output，$depth=0，$args=array（））{
$indent=str\u repeat（“\t”，$depth）；
$output.=“$indent
\n”；
}
/*输出
和包含的'；
$item_output.=$args->after；
$output.=apply_filters（'walker_nav_menu_start_el'、$item_output、$item、$depth、$args）；
}
/*关闭

*注意：已关闭
*注2:$depth在此级别是“正确的”
*/
函数end_el（&$output，$item，$depth=0，$args=array（））
{
$output.='
'；
返回；
}
/*将“hasChildren”属性添加到项
*代码来源：http://wordpress.org/support/topic/how-do-i-know-if-a-menu-item-has-children-or-is-a-leaf#post-3139633
*/
函数显示元素（$element，&$children_elements，$max_depth，$depth=0，$args，&$output）
{
//检查此项是否有子项，并相应地设置$item->haschilders
$element->hasChildren=isset（$children\u elements[$element->ID]）&&！empty（$children\u elements[$element->ID]）；
//继续正常的行为
返回父元素：：显示元素（$element、$children\u elements、$max\u depth、$depth、$args、$output）；
}
}

在header.php中（或菜单所在的任何位置）

您现在如何调用菜单？这是一个问题：您实际上想解决什么问题？为什么要炸土豆条？这有什么作用？@Mark我正在使用菜单的默认wordpress功能。@cale_b我已组织wordpress，以便将所有子页面拉入父页面。例如，logo页面包含显示在其上的所有子页面的内容。当有人单击菜单项时，我希望他们转到主徽标页面，并自动向下滚动到该子页面内容所在的页面锚。好的，当你说“子菜单”时，这些菜单设置在哪里？你怎么称呼他们？“默认设置”不起作用-您是在使用“菜单”功能，还是只是调用

wp\u nav\u menu

而不在仪表板中设置菜单？（在“外观”=>“菜单”下）？如果在仪表板中设置菜单，实际上可以通过仪表板界面设置自定义链接，并用所需的标签版本替换所有“标准”链接。

<?php wp_nav_menu( array('walker' => new custom_names())); ?>