ID 的超链接 - HTML

Question

我的主页上有一个联系人 div。

<div id="contact">....</div>

在我的菜单中，我有 link 到 #contact 可以平滑向下滚动以联系 div。

<a href="#contact">Contact Us</a>

在另一个页面上，我必须使用

<a href="www.mywebsite.com/#contact">

在使用 wordpress 时，所有页面都有一个菜单，我可以同时拥有这两种功能，还是必须创建 2 个不同的菜单，一个用于主页，一个用于其余页面？

Answer 1

解决方案 #1 - 可互换的菜单项

添加 x2 个菜单项：

Select屏幕右上角的“屏幕选项”
Select“CSS类”在显示高级菜单属性
添加 x2 个自定义 links（自定义链接 框），例如：
#contact
/#contact
添加菜单项后，单击它展开它，添加一个在标签“CSS 类下方的输入字段中自定义 class （可选）”，例如：
anchor-link 用于菜单项 #contact
internal-link 用于菜单项 /#contact

声明自定义样式：

/* for the home page */
.home .anchor-link {
   display: block; /* or inline-block, whichever is applicable */
}
.home .internal-link {
  display: none; /* hide on home page */
}

/* for every other page */
.anchor-link {
   display: none; /* hide on every other page */
}
.internal-link {
  display: block; /* or inline-block, whichever is applicable */
}

注意：Wordpress 有一个 body class 作为主页，适当地称为 home - 您可以将其用作任何主页的基本选择器您需要声明的特定样式规则。

解决方案 #2 - jQuery `.attr()` 方法

Wordpress links 到 jQuery CDN 库，因此我们可以利用 jQuery 的优势以及它如何满足我们这里的情况的要求。

使用 jQuery .attr() 方法，我们可以编写一个脚本来检查有问题的元素，url 锚定到，是否已经存在于页面上，如果它我们是否从菜单项的 url 中删除前面的正斜杠，使其成为 锚点 link 而不是 内部 link.

添加菜单项和脚本：

按照解决方案#1中提到的方法查看如何启用 CSS 类 用于菜单项 - 我们需要此 class 作为选择器以使用 jQuery 脚本
将菜单项添加为 内部 link 并具有 亲属 url （最好将其保留为 link 一开始，因为通常情况下，它必须是一个 - 你只有带有 id 的元素 #contact在首页，所以我们写的脚本只会必须在主页上运行)
编写脚本，然后将其添加到您的主题文件中，例如 header.php 或 footer.php*

*在这里我会建议不要编辑核心主题文件，任何主题更新都将丢失您的自定义设置，如果您不完整，这也是破坏主题的简单方法确定你在做什么。我强烈建议为这些定制安装一个插件，像 WP Beginner 的“Insert Headers & Footers”这样的插件将完美工作，你也应该发现这个插件对这种性质的未来定制很有用，而且不仅适用于这个“一次性用例”——你会发现我唯一一次提倡使用插件，否则它只是代码膨胀和另一个需要维护的插件.

jQuery脚本：

未经测试但足以证明其意图

jQuery(document).ready(function(){
  if(jQuery('#contact').length) { /* if '#contact' exists length will be greater than 0 */
    /* update the href attribute for the anchor link in question */
    jQuery('.dynamic-link a').attr('href','#contact'); 
  }
});

当文档准备就绪时，上述脚本将运行检查具有 id “contact” 的元素是否已存在于页面上，如果是，它将更新菜单项上的 href 属性，我们将自定义 class 添加到 (.dynamic-link)。请注意，此自定义 class 添加到 列表项 (li) 而不是嵌套锚点 link (a)。

Answer 2

添加自定义 link 作为，<a href="www.mywebsite.com#contact">

在您的自定义 jquery 中添加

//jQuery for Page Scroll - Single page      
$('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: target.offset().top
                }, 500);
                return false;
            }
    }
});



// jQuery for Page Navigation
$( window ).load(function() {

            if(window.location.hash) {
                var url=window.location.href;
                var hash = url.substring(url.indexOf('#')+1);
                $('html, body').stop().animate({
                    scrollTop: $("#"+hash).offset().top
                }, 1000);   
            }  
});

ID 的超链接 - HTML

Hyperlink to ID - HTML

html

javascript

css

wordpress

anchor

解决方案 #1 - 可互换的菜单项

解决方案 #2 - jQuery `.attr()` 方法

ID 的超链接 - HTML

Hyperlink to ID - HTML

html

javascript

css

wordpress

anchor

解决方案 #1 - 可互换的菜单项

解决方案 #2 - jQuery .attr() 方法

解决方案 #2 - jQuery `.attr()` 方法