WordPress.如何使用jQuery禁用href

下面的指南将向您展示如何禁用链接 Cherry framework 3.x and Cherry Framework 4.x 基于模板使用 jQuery

!注意，所有的自定义 javascript 代码将被添加到 child themejs files.

1. The custom js 文件可以在这两个路径下找到 Cherry Framework 3.x and Cherry Framework 4.x based templates: wp-content themeXXXX / js /主题;

2. 如果无法找到该文件，则应该创建该文件. 下面是如何包含自定义js文件的指南:

   • For Cherry Framework 3.x based templates: WordPress Cherry 3.x. 如何包含自定义JS文件;

   • For Cherry Framework 4.x based templates: CherryFramework 4. 如何包含自定义JS文件;

3. 我们将回顾3种技术，这将有助于我们禁用链接;

   • 第一个是利用 preventDefault() function;

     $( document ).准备好(函数(){
     	$('a').点击(函数(e) { 
     	e.preventDefault(); 
     }); 

     上面的代码阻止了链接的默认行为, 特别是这个将全局禁用链接. 这就是为什么基本的认识 CSS selectors is required. The more refined CSS selector 将是:

     “(href =“the_link_to_be_disabled_here”)”

     Where the_link_to_be_disabled_here，放入要锁定的链接.

   • 第二个可以用来禁用链接的代码如下:

     $( document ).准备好(函数(){
     	$('a').removeAttr(“href”);
     });

     上述规则将删除 html href attribute. 该属性负责链接的目的地. 一旦删除，链接将不再工作.

   • 删除链接的最后一种方法是简单地通过使用 click event handler:

     $( document ).准备好(函数(){
     	$('a').点击(function () {
     		return false; 
     	});
     });
     		

4. 所有的代码都必须包含在 $( document ).ready() jQuery function. 有必要包括这一点 function 如果您要将自定义jQuery代码添加到新创建的js文件 由于代码只能运行一次 DOM (文档对象模型) of the web page 准备好执行 JavaScript code.

5. 如果有已经存在的 JavaScript 包含jQuery代码的文件 function 应该在?的右括号之前添加 $( document ).ready() function;

6. 这里最重要的部分之一是选择正确的链接并定位a selector 特定于此链接. 建议使用 browser inspector tools, this link 我将为你提供更多的信息 browser inspectors. Incorrect CSS selector pattern 会不会导致意想不到的工作环环相扣 website. 可以找到更多关于选择器的信息 here.

请随时查看下面的详细视频教程:

同时，享受更多的我们的 WordPress themes with Cherry Framework functionality.

我们还建议您查看 2017年最佳WordPress主题 如果你需要更多的选择 website 构建解决方案.