{"id":2814,"date":"2015-02-04T16:33:00","date_gmt":"2015-02-05T00:33:00","guid":{"rendered":"http:\/\/eloine.com\/blog\/?p=2814"},"modified":"2015-02-04T17:23:21","modified_gmt":"2015-02-05T01:23:21","slug":"highlight-link-to-current-page-with-javascript","status":"publish","type":"post","link":"https:\/\/eloine.com\/blog\/archives\/2814","title":{"rendered":"Highlight link to current page with javascript"},"content":{"rendered":"

If you have a menu on your website and you would like to provide some visual feedback with that one of the links in the menu bar is the page you are on it’s pretty easy with some HTML and CSS.<\/p>\n

All you have to do is add a class name to the HTML for that link and then style that class name with CSS.<\/p>\n

For example just style the class of “current”:<\/p>\n

<li<\/span> class<\/span>=<\/span>\"current<\/span>\"<\/span>><a<\/span> href<\/span>=<\/span>\"http:\/\/www.somepage.com\"<\/span>><\/span>some page<\/span><\/a><\/li><\/span> <\/code><\/pre>\n
Unfortunately if you are using a common navigation system where you have one file that has all the navigation elements linked to hundreds of pages it’s not possible to change the link style for every link. It defeats the purpose of a common shared file.<\/p>\n
Thankfully I found an old blog post by Jonathan Snook<\/a> that had a script that worked perfectly to strip the link from the current page button. See how “Drama Club” in this screen shot is now light gray and slightly out-dented? It is now an inactive link so if you hover your mouse over it the cursor will not change.<\/p>\n
\"Screen<\/a><\/p>\n
All you need to make this work is a link to your JS file in your HTML document in the head section like this<\/p>\n
<script<\/span> type<\/span>=”text\/javascript<\/a>” src<\/span>=”clearlink.js<\/a>“><\/script<\/span>><\/p>\n
Then in the JS file this is the below content is all you need. After that the rest is styling with CSS!<\/p>\n
\/*\r\nCLCP v2.1 Clear Links to Current Page\r\nJonathan Snook\r\nThis code is offered unto the public domain\r\nhttp:\/\/www.snook.ca\/jonathan\/\r\n*\/\r\n\r\nwindow.onload = clearCurrentLink;\r\n\r\nfunction clearCurrentLink(){\r\n    var a = document.getElementsByTagName(\"A\");\r\n    for(var i=0;i<a.length;i++)\r\n        if(a[i].href == window.location.href.split(\"#\")[0])\r\n            removeNode(a[i]);\r\n}\r\n\r\nfunction removeNode(n){\r\n    if(n.hasChildNodes())\r\n        for(var i=0;i<n.childNodes.length;i++)\r\n            n.parentNode.insertBefore(n.childNodes[i].cloneNode(true),n);\r\n    n.parentNode.removeChild(n);\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"
If you have a menu on your website and you would like to provide some visual feedback with that one of the links in the menu bar is the page you are on it’s pretty easy with some HTML and CSS. All you have to do is add a class name to the HTML for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,8],"tags":[],"class_list":["post-2814","post","type-post","status-publish","format-standard","hentry","category-graphic-design","category-web-design"],"_links":{"self":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2814","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/comments?post=2814"}],"version-history":[{"count":3,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2814\/revisions"}],"predecessor-version":[{"id":2818,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/posts\/2814\/revisions\/2818"}],"wp:attachment":[{"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/media?parent=2814"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/categories?post=2814"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eloine.com\/blog\/wp-json\/wp\/v2\/tags?post=2814"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}