{"id":162,"date":"2017-03-13T12:33:23","date_gmt":"2017-03-13T12:33:23","guid":{"rendered":"https:\/\/www.wikitechy.com\/technology\/?p=162"},"modified":"2017-10-15T13:54:30","modified_gmt":"2017-10-15T08:24:30","slug":"disable-link-using-css","status":"publish","type":"post","link":"https:\/\/www.wikitechy.com\/technology\/disable-link-using-css\/","title":{"rendered":"[ Solved \u2013 3 Answers] Disable link using css"},"content":{"rendered":"<p><label class=\"label label-warning\">PROBLEM :<\/label><br \/>\nIs there any way to disable a link using CSS?<\/p>\n<p>If you have a class called current-page and want links with this class to be disabled so that no action occurs when they are clicked.<\/p>\n<p><label class=\"label label-info\">SOLUTION\u00a01 :<\/label><\/p>\n<ul>\n<li>CSS can only be used to change the style. The best way you could probably do with CSS is to hide the link altogether.<\/li>\n<li>What you really need is some javascript. Here&#8217;s how can you do the javascript function and what you want using the jQuery library.<\/li>\n<li>$(&#8216;a.current-page&#8217;).click(function() { return false; });<\/li>\n<\/ul>\n[ad type=&#8221;banner&#8221;]\n<p><label class=\"label label-info\">SOLUTION 2 :<\/label><\/p>\n<p>CSS can&#8217;t do that because it is only for presentation.<br \/>\nYour options are:<\/p>\n<ul>\n<li>Don&#8217;t include the href attribute in your <a> tags.<\/a><\/li>\n<li><a>Use JavaScript, to find the anchor elements with that class, and remove their href or onclick attributes accordingly.<\/a><\/li>\n<li><a>jQuery would help you with that problem(NickF showed how to do something similar but better).<\/a><\/li>\n<\/ul>\n<p><label class=\"label label-info\">SOLUTION 3 :<\/label><br \/>\nHere the solution for Bootstrap Disabled Link and Bootstrap Disabled Button.<\/p>\n<p>Bootstrap Disabled Link<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;a href=&quot;#&quot; class=&quot;btn btn-primary btn-lg disabled&quot; role=&quot;button&quot;&gt;Primary link&lt;\/a&gt;<br\/>&lt;a href=&quot;#&quot; class=&quot;btn btn-default btn-lg disabled&quot; role=&quot;button&quot;&gt;Link&lt;\/a&gt;<\/code><\/pre> <\/div>\n[ad type=&#8221;banner&#8221;]\n<p>Bootstrap Disabled Button but it looks like link<\/p>\n<div class=\"code-embed-wrapper\"> <div class=\"code-embed-infos\"> <span class=\"code-embed-name\">HTML Code<\/span> <\/div> <pre class=\"language-markup code-embed-pre line-numbers\"  data-start=\"1\" data-line-offset=\"0\"><code class=\"language-markup code-embed-code\">&lt;button type=&quot;button&quot; class=&quot;btn btn-link&quot;&gt;Link&lt;\/button&gt;<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"<p>[Solved \u2013 3 Answers] HTML &#8211; CSS &#8211; Disable link using css &#8211; Is there any way to disable a link using CSS?If you have a class called current-page<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[26,83465,24],"tags":[147,125,143,161,138,154,149,160,133,136,130,144,165,162,153,132,152,131,141,159,142,134,158,164,127,126,163,155,151,156,140,135,124,128,150,137,148,157,139,129,146,145],"class_list":["post-162","post","type-post","status-publish","format-standard","hentry","category-css","category-css3","category-html","tag-a-link-css","tag-a-link-disabled","tag-css-a-link","tag-css-change-link-color","tag-css-disable-link","tag-css-html-link","tag-css-hyperlink","tag-css-hyperlink-color","tag-css-link","tag-css-link-color","tag-css-link-decoration","tag-css-link-style","tag-css-no-underline-link","tag-css-remove-link","tag-css-remove-link-underline","tag-css-text-decoration-blink","tag-disable-a-link","tag-disable-link","tag-disable-link-css","tag-hyperlink-css","tag-link-color-css","tag-link-css","tag-link-css-style","tag-link-decoration","tag-link-decoration-none","tag-link-disabled","tag-link-hover-css","tag-link-href-css","tag-link-html-css","tag-link-in-css","tag-link-rel","tag-link-rel-stylesheet","tag-link-removed","tag-link-style","tag-link-style-css","tag-link-stylesheet","tag-link-to-css","tag-remove-underline-from-hyperlink","tag-remove-underline-from-link","tag-style-link","tag-stylesheet-link","tag-text-decoration-blink"],"_links":{"self":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/162","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/comments?post=162"}],"version-history":[{"count":0,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/posts\/162\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/media?parent=162"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/categories?post=162"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wikitechy.com\/technology\/wp-json\/wp\/v2\/tags?post=162"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}