Javascript - Change active link and add period to end of link

Question

I have a working code that adds a period to the nav-item marked with active class and moves the class="active" when a link to another page in my nav is clicked.

I need to add a few lines of code that will remove the period at the end of the current link and move it to the newly clicked active link.

Can someone please help me with this code, as I am a bit lost?!

See code and image below for reference.

Thanks in advance!

 $(document).ready(function () { 'use strict'; // SITE MENU // This line of code adds the period to end of link document.getElementById("nav-item").innerHTML += "."; // These lines of code move the active class when a link is clicked $(function () { var current_page_URL = location.href; $("a").each(function () { if ($(this).attr("href") !== "#") { var target_URL = $(this).prop("href"); if (target_URL == current_page_URL) { $('.nav a').parents('li, ul').removeClass('active'); $(this).parent('li').addClass('active'); return false; } } }); }); }); 

Answer 1

Instead of adding period with innerHTML, you can use CSS to insert that period as shown below :

.active:after {
  content: ".";
}

So whenever active class is added to an element it will add period to the end of the content.

Answer 2

Can you use CSS to accomplish this? I'm not sure what the structure of your code is since the HTML isn't included, but assuming you can target the active link, you could use something like:

.active:after {
    content: ".";
}