JavaScript external navigation file onClick function that will stay in effect through page change

Question

I am new to JavaScript and using an external file to populate my navigation bar. I would like my navigation tabs to change size/position using my "onTab" class when clicked, and stay that way as long as that navigation tab is supporting the active page. How would the JavaScript go?

I have tried several different onClick and add/remove functions to get this to happen, but apparently I don't know the proper JavaScript series and terms needed for this particular action, yet.

<div id="page-navigator" class="nav-tabs">
  <ul class="tabs">
    <li class="grow-xs onTab"><a href="" class="tab">Tab A</a></li>
    <li class="grow-xs"      ><a href="" class="tab">Tab B</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab C</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab D</a></li>
    <li class="grow-xs"      ><a href="" class="tab">Tab E</a></li> 
    <li class="grow-xs"      ><a href="" class="tab">Tab F</a></li>          
  </ul>
</div>

EDIT: I know this raw attempt is hilariously wrong, but I "think" I am looking for something like this:

identify current page url.
get.elementByClassName "tag"
look for class "tag" href that is same as URL
if - class tag is same as page url, add onTab class

$(document).ready(function ($) {
    function getURL() {
        window.location.href("url")
    });
    var y = document.getElementsByClassName("tag");
    if (x.a[href="window.location.href"]); === y {
        toolbar.classList.add('onTab')
    }
});

If these are just normal links linking to different pages - then you need to check which URL you are on when the page loads, and find the corresponding menu item and add your onTab class to it. — CBroe, Jan 24 '23 at 12:35
This question may seem basic, but far from simple to achieves in HTML/CSS/JS. HTML was designed at a time when the internet did not exist. In other words, the idea of an HTML document was that of an entire book, and not of an assembly of pages to be loaded one by one. The "page" change can always be done using anchors, [i.e. with a `#`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page) (this why the tagName is an `a`). — Mister Jojo, Jan 24 '23 at 13:11
There is a lot of questions in one here, as @MisterJojo said this is not trivial. You could maybe have a look to tutorials for making "single page applications" or that kind of things. Or maybe see which kind of patterns are used by frameworks like React, Vue etc. And anyway you can show what you tried and how is formatted your external file, it can be a starting point at least. — Peterrabbit, Jan 24 '23 at 14:21
@Cbro - how would it work to self-identify the loaded page and then add the class to an element in an external file? — JMM, Jan 24 '23 at 14:25
I have added an edit to the original question to show my idea of what a code might do — JMM, Jan 24 '23 at 15:08

Mister Jojo · Answer 1 · 2023-01-24T18:49:13.350

Here is a possible solution, based on your approach:

Any HTML pages A, B, C [ files: page_A.html / page_B.html / page_C.html ]

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>page A </title> <!-- or B / C-->
<script src="navigation.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>

  <h3> this is page A </h3> <!-- or B / C-->
  <p>Blah blah bla....</p>
</body>
</html>

JS code: [ file: navigation.js ] (witch use backQuotes)

const myMenu = document.createElement('menu')
  ;
myMenu.innerHTML = `
  <li> <a href="page_A.html"> go to page A</a> </li>
  <li> <a href="page_B.html"> go to page B</a> </li> 
  <li> <a href="page_C.html"> go to page C</a> </li>`
  ;
document.body.prepend(myMenu)
  ;
myMenu.querySelectorAll('li > a').forEach(elmA => 
  {
  if ( elmA.pathname === window.location.pathname )
    {
    elmA.classList.add('onTab')  
    }  
  })

I have also done a CSS: [ file: style.css ]

body {
  font-family : Arial, Helvetica, sans-serif;
  font-size   : 16px;
  }
menu {
  list-style : none;
  padding    : 0;
  margin     : 1rem 0 2rem .2rem;
  width      : fit-content;
  }
menu > li {
  width : fit-content;
  }
menu > li:not(:first-of-type) {
  margin-top : .2rem;
  }
menu a {
  display    : block;
  width      : 10em;
  padding    : .2rem .6rem;
  background : darkgray;
  }
menu a.onTab {
  background     : coral;
  color          : darkblue;
  cursor         : default;
  pointer-events : none;
  }
menu a:not(.onTab):hover {
  background-color: cadetblue;
  }
menu a  { text-decoration: none; color: black; }
menu a:visited                 { color: black; }

Oh thank you, I look forward to working through this and figuring out how it can interact with my current code! QUESTION: Just to clarify -in the script where you put the 'myMenu.innerHTML' is this actually where I would build the menu list, rather than in my regular html? — JMM, Jan 25 '23 at 13:13
@JMM If you just stay on HTML/JS/CS, and without interaction with a server, HTML does not allow you to break down a document into different parts, like here with a menu part and another part for the text's content. In the code shown here, this list of the menu is in the javascript document, then added into HTML pages. — Mister Jojo, Jan 25 '23 at 13:36

JavaScript external navigation file onClick function that will stay in effect through page change

1 Answers1