Trouble getting nav bar to highlight selected tab-CodePudding

I'm having trouble figuring this out. I need the selected tab to be underlined when you're on that page. So when you're on the settings page I need the settings tab to be underlined, and when your on the account page I need the account tab to be underlined. Not sure what I’m doing wrong. I'm not that good at JavaScript or CSS.

This is what I need: pic of tabs with underline

This is what I’m getting: pic of tabs without underline

codepen: https://codepen.io/Mike5678/pen/oNdgvbJ

<div id="nav">
<div >
    <a href="login.html" ><span onclick="addSelected()" >account_circle</span>
    </a>
</div>
<div >
    <a href="settings.html" ><span onclick="addSelected()" >settings</span>
    </a>
</div>

#nav {
    background-color: #171a1c;
    border-bottom: 1px solid #808080;
    height: 60px;
    display: flex;
    justify-content: flex-end
}

.icons-box {
    border-left: 1px solid #808080;
    width: 60px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icons-box.selected {
    border-bottom: 2px solid #b57917;
}

function addSelected() {
    $(".icons-links").click(function(event){
        $(".icons-box").removeClass("selected");
        $(".icons-box").addClass("selected");
    })
}

CodePudding user response：

Your code reads

$(".icons-box").removeClass("icons-box");
$(".icons-box").addClass("selected");

In the first line, you query the element with the class icons-box, and remove its class.

In the second line, you try to query the element with the class icons-box, but you won't get anything back, because you just removed the class from that element in the previous line --- e.g. there will now be no elements on the page that match the .icons-box selector!

I'd suggest either swapping the order of these two statements, or better yet keeping one class on the elements that you can use to reference them, and one which controls the styling

CodePudding user response：

Here's the correct definition of addSelected(), given that you remove the onclick HTML attribute from your HTML elements .icons-links (it's good design practice to keep JavaScript away from HTML files):

$(".icons-links").click(addSelected);
function addSelected(event) {
    $(".icons-box").removeClass("selected");
    $(this.parentNode).addClass("selected");
    return false;
}

Here's what's happening here:

The selected class is removed from all .icons-box elements and then that same class is added to the parent of the .icons-links element clicked. The return false statement is given to prevent the default action that happens as the link is clicked. You can even use event.preventDefault().

CodePudding user response：

As stated in my comment, your current code tries to set selected class style to a link on click event. This will be applied briefly, while loading the new page, then it will be lost.

In order to set that class when the new page is loaded, you could check whether the current page URL (location.href) contains the current page name, like this:

$(function() {
  let currentURL = location.href;
  
  if (currentURL.includes('login.html')) {
    $('a[href="login.html"]').addClass('selected');
  } else if (currentURL.includes('settings.html')) {
    $('a[href="settings.html"]').addClass('selected');
  }
});

With CSS:

.icons-links.selected {
  border-bottom: 2px solid #b57917;
}