Can anyone tell me how to active particular navbar link while coming from another page-CodePudding

Basically I have four page i.e index.html , contact.html , explore.html , reservation.html and in index.html I have several section i.e #menu #event #chef #gallery

here what's trying when someone clicks on #menu section (on the same page) on the navbar (link named menu)will get highlighted or when some click on contact it will redirect to the contact page but when he again click back to the #menu (on index.html) menu section of index.html will get highlighted

here is the navbar code

    <nav id="navbar">
      <ul>
         <li><a href="/index.html" >Home</a></li>
         <li><a href="/explore.html">About us</a></li>
         <li><a href="/index.html#menu-container">Menu</a></li>
         <li><a href="/index.html#event-container">Event</a></li>
      </ul>
      <a href="/index.html">
         <!-- Logo -->
         <div id="logo">
            <img src="./image/logo/chourasiyahotellogo.png" alt="ChourasiyaHotel">
         </div>
      </a>
      <ul>
         <li><a href="/index.html#gallery">Gallery</a></li>
         <li><a href="/index.html#chef">Our chef</a></li>
         <li><a href="/reservation.html">Reservation</a></li>
         <li><a href="/contact.html">Contact</a></li>
      </ul>
   </nav>

please, someone, tell me any function of js to do it also i don't have any knowledge about js so explain it a little so I can use or customize I have some knowledge of programming in like a loop or if

p.s Also I have try this function copied from the internet it works well on the same page when i click #menu from another page only the default home will get highlighted

var btns = document.querySelectorAll(".navbutton");
Array.from(btns).forEach(item => {
   item.addEventListener("hover", () => {
   var selected = document.getElementsByClassName("active");
   selected[0].className = selected[0].className.replace(" active", "");
   item.className  = " active";
   });
});

I have added class active and nav button while trying this function

   <nav id="navbar">
  <ul>
     <li><a href="/index.html"  >Home</a></li>
     <li><a href="/explore.html" >About us</a></li>
     <li><a href="/index.html#menu-container" >Menu</a> 
      </li>
     <li><a href="/index.html#event- 
     container">Event</a></li>
  </ul>
  <a href="/index.html">
     <!-- Logo -->
     <div id="logo">
        <img src="./image/logo/chourasiyahotellogo.png" 
   alt="ChourasiyaHotel">
     </div>
  </a>
  <ul>
     <li><a href="/index.html#gallery">Gallery</a></li>
     <li><a href="/index.html#chef" >Our chef</a></li>
     <li><a href="/reservation.html">Reservation</a> 
     </li>
     <li><a href="/contact.html">Contact</a></li>
  </ul>

CodePudding user response：

Please addClass active to the <li> and try.

      <ul >
        <li ><a  href="/index.html">Home</a></li>
            ...
      </ul>

CodePudding user response：

Update: Test this in your website. It checks for the current URL and depending on if the current URL match your href="/..." it adds a class. Also, remove the active class from every element.
Ideally, you want to do this server-side.

Update 2: Added another function to add .active on click for anchor links.

// This sets .active on page load and on click
function setNavigation() {
  let current_url = location.pathname.split('/')[1];
  let selected = document.getElementsByClassName("active");
  if (current_url === "") return;
  let items = document.querySelector("header").getElementsByTagName("a");
  for (let i = 0, len = items.length; i < len; i  ) {
    items[i].addEventListener("click", () => {
      if (selected.length !== 0) { // If there are menu items with .active
        selected[0].className = selected[0].className.replace(" active", ""); // Remove .active
      }
      items[i].className  = " active"; // Add .active to click
    });
    if (items[i].getAttribute("href").indexOf(current_url) !== -1) {
      items[i].className = "active"; // Add .active to current URL -> this triggers AFTER previous "if" otherwise currentURL items will lose .active
    }
  }
}
setNavigation()

ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
  color: #151515;
  transition: all .3s ease;
}

a.active {
  text-decoration: underline;
  transition: all .3s ease;
}

header {
  margin-top: 2rem;
}

nav ul {
  display: flex;
  gap: 10px;
  padding: 20px;
  background: #fcfcfc;
  box-shadow: 0 4px 6px #0005;
}

<header>
  <nav id="navbar">
    <ul>
      <li><a href="/home" >Home</a></li>
      <li><a href="/about" >About us</a></li>
      <li><a href="/menu" >Menu</a></li>
      <li><a href="#event" >Event</a></li>
    </ul>
  </nav>
</header>