How to change styling of a link which is leads to the page that is currently open?

Styling (CSS)
1

0

I am trying to do something very simple… I want links with the class of PAGE-MENU-LINK to be always black which I succeeded in doing. I also want the link which leads to the page on which it is being viewed on to have a line through the middle. In this part, I partially succeeded… The link only has a line through it while I hold down the mouse over it. I want the link to have a line through the middle of it when you hold the button down, and after you click on the page… I would prefer to stick to just CSS and HTML and possibly Javascript… Please not PHP…

a.PAGE-MENU-LINK:current does not work the way I thought it would… I am using Pinegrow with Bootstrap

Here is my style.css


a.PAGE-MENU-LINK:active {
    text-decoration: line-through;
    //color: rgb(0, 0, 0);
}

a.PAGE-MENU-LINK:current {
    text-decoration: line-through;
    //color: rgb(0, 0, 0);
}

a.PAGE-MENU-LINK {
    text-decoration: none;
    color: rgb(0, 0, 0);
}

and here is my HTML

<a href="about.html" class="ACTIVE-MENU-LINK PAGE-MENU-LINK">ABOUT</a>

Thanks!

2

@pgrowbig the pseudo selector :local-link should do the trick BUT it doesn’t seem to be supported in Chrome (and possibly other major browsers): :local-link - CSS: Cascading Style Sheets | MDN

The only way I can think of is using JavaScript code, for example, by adding a special class to all local links and then using that class in the selector:

<script>
    // add to the end of the document
    var links = document.querySelectorAll('a[href]');
    var page_url = window.location.href.split(/[\?\#]/)[0];
    for(var i = 0; i < links.length; i++) {
        if(links[i].href.startsWith(page_url)) {
            links[i].classList.add('local-link');
        }
    }
</script>

<style>
   a.local-link { ... }
</style>
1 Like
3

So I’ve been going crazy on why this doesn’t work but I think I figured it out, just need a little bit of guidance…

FYI i used a class called AG-CURRENT-PAGE instead of local-link and defined it properly style.css

Also, I found a very similar javascript online too which seems to do the same function as you wrong just worded differently. I played with both as I couldn’t get either of them to work which tells me the problem is me. Here is that function…

var currentPage = location.href;
var allA = document.getElementsByTagName('A');
for(var i = 0, len = allA.length; i < len; i++) {
    if(allA[i].href == currentPage) {
         allA[i].className = "AG-CURRENT-PAGE";
    }
}

The javascript would not add the AG-CURRENT-PAGE class to the current URL on my page. I think I know why… my URLs use a javascript function to create delay between going to that URL and the link. Here is how it looks like

<a href="javascript:delay('about.html')" class="AG-PAGE-MENU-LINK">ABOUT</a>

I suspect to get both yours Javascripts working I have to adjust the line with if(links[i].href.startsWith(page_url)) { to something that encorporates the delay such as javascript:delay(’ + page_url + ')

I am not to familiar with Javascript so having a hard time how to format this

5

@pgrowbig yes, your hunch is correct. But there are other issues with this code and situations where it might not work. This issue is beyond the scope of helping users to use Pinegrow, so I’m unable to get further into it. You could ask for help on StackOverflow or a similar site.

1 Like