Ways to emphasize the currently active tabs on a navigation bar

How can I highlight the active tabs and shift it when clicking on another link?

$(function() {
  $('.nav ul li').on('click', function() {
    $(this).parent().find('li.active').removeClass('active');
    $(this).addClass('active');
  });
});
.nav {
  background-color: #510A32;
  height: 120px;
  background: cover;
  margin: 0;
  padding: 0;
  overflow: hidden;
  top: 0;
}

.nav ul {
  list-style-type: none;
}

.nav li {
  float: left;
  padding: 30px 40px 70px 0px;
  font-family: Arial;
}

.nav li a {
  display: block;
  color: #fff;
  padding: 14px 16px;
  text-decoration: none;
  font-weight: bold;
}

.nav ul li:hover a {
  color: gold;
}

li.active a {
  color: gold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="nav">

  <ul>

    <li class="active"><a id="home" href="#">Home</a></li>

    <li><a id="story" href="#">Our Story</a></li>

    <li><a id="Menus" href="#">Menus</a></li>

    <li><a id="OrderOnline" href="#">Order Online</a></li>

    <li><a id="contact" href="#contact">Contact & Reservations</a></li>

  </ul>

</div>

jqueryhtmlcss

Answer №1

Try using this method, it may help solve your issue

ul li a.active {
  color:blue;
  background:#ccc;
  text-decoration: underline;
}

Include your HTML code below...

<ul>
  <li><a href="#" class="active">Home</a></li>
  <li><a href="#" >Services</a></li>
</ul>

Add your Javascript code here

document.querySelector("a").addEventListener("click", function () {
    this.classList.toggle("active");
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is there a way to retrieve a value from localStorage and use it to automatically set the selected option in a UL-based dropdown list upon page load

I have implemented a unique UL-based dropdown list that I discovered here (specifically the third model) as the foundation for a role-based selection box for my users. To enhance user experience, I am storing their role selection in localStorage so they do ...

javascriptjqueryhtmllocal-storage

Tips for maintaining an organized layout of buttons on a compact screen

When the following HTML code is executed on a small screen, one or more buttons will naturally shift to the "lower line" in order to adjust to the screen size. While this may seem like a good thing initially, unfortunately, any button that moves down a row ...

html

Exploring the anatomy of the img src tag

Using jQuery, I have successfully implemented code to display an image when clicked by storing the image source into a variable like this: var imgSrc = $(event.target).attr('src'); I then use this variable to add the image to a div and show it o ...

jqueryhtmlcss

Closing a live search box by tapping away from it

The link I found as the best example for this topic is: http://www.example.com In the example provided, if you enter a keyword in the search field, suggestions will drop down. I have implemented this code but would like to make a slight modification. I w ...

javascriptjqueryonclick

Is it possible to automatically set focus on the input box in an html tag multiple times instead of just once with autofocus?

Currently, I am developing an online editor that allows users to quickly edit individual words. My approach involves replacing specific words with input boxes containing the word for direct editing by users. In order to streamline the process and ensure e ...

javascripthtmlangular

Is there a way I can modify the display setting to show 4 slides per view?

var swiper = new Swiper(".new-arrival", { slidesPerView: 4, centeredSlides: false, spaceBetween: 30, autoplay: { delay: 5500, disableOnInteraction: false, }, pagination: { el: ".swiper-pagination", type: &qu ...

javascriptcssswiper.js

The error alert must be displayed directly beneath the specific box

When error messages occur in this code, they are displayed through an alert box. However, I would prefer to have the error message appear below the specific text box instead. This means that when I click on the submit button and a field is left empty, the ...

phpjavascripthtml

When dynamically loading content with ajax, dynamic content fails to function properly

Currently, I am attempting to incorporate dynamic content loading after the user logs in by utilizing $.ajax. Here is how it's being done: $.ajax({ url: "functions.php", type: "GET", data: login_info, datatype: 'html', a ...

javascriptjqueryajax

Error: The parent container element cannot be edited until the child element has been properly closed

I received a Script Error stating that I am unable to modify the parent container element before the child element is closed. In response, I clicked Yes but my web page isn't being displayed. In the code for my Product page, I start with: http://past ...

javascriptjqueryyuiyahoo-api

Tips for modifying the color of selected text

Is there a way to change the color of the dropdown text? Currently, it is set to red but initially appears as black. When clicked on, it changes to red. How can I make it so that the color is initially displayed as red? <select> <option style ...

htmlcss

Vue.js component communication issue causing rendering problems

When it comes to the Parent component, I have this snippet of code: <todo-item v-for="(todo, index) in todos" :key="todo.id" :todo="todo" :index="index"> </todo-item> This piece simply loops through the todos array, retrieves each todo obj ...

javascripthtmlvue.jsvuejs2vue-component

Why is fading out columns in an HTML table with jQuery's .fadeTo() method taking so long?

I am looking to implement a functionality where all cells in a column of my HTML table fade out when I click on a button located in the header of that column. I have written the following JavaScript code to achieve this: ... myDOMElement.find(".headerIcon ...

javascriptjquery

Obtain the value of an element from the Ajax response

Just starting out with Jquery and Ajax calls - here's what I've got: $(document).ready(function () { $.ajax({ type: "GET", url: "some url", success: function(response){ console.log(response); } }) }); Here's the ...

javascriptjqueryajax

Using whitespace to format a document.write in JavaScript

I'm in the process of creating a dynamic table using JavaScript and a set of objects. I've managed to structure it, but now I require some extra white space between them, almost like tabbing them out. How can I achieve this efficiently with my cu ...

javascripthtmlwhitespacedocument.write

Choose the option to replace "&" using regular expressions

I am currently working on a function that allows for selecting options and dynamically replacing a specific character in the URL. & The goal is to replace &amp; with & In the given code snippets, Jquery and Perl Template (jquery) are u ...

jqueryregex

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

I'm puzzled as to why a scroll bar materializes

I recently encountered an interesting issue while working on my responsive web design project. Upon resizing the browser to a width of 615px or less, a horizontal scroll bar unexpectedly appeared. It's puzzling as to which element is causing this prob ...

cssscrollbarresponsive-designhorizontal-scrolling

"Disappearing act: Navigating through pages causes the navigation

Struggling with navigation in my asp.net core web app development. My directory structure includes the use of Areas. When navigating through pages in the main folder like Index, Index1, and Private, everything works fine. However, once I navigate to an Ar ...

htmlasp.netasp.net-mvcasp.net-corenavigationbar

How to choose the option in one select box based on the selection in another, and vice versa

How can I dynamically select options in one select box based on the selection of another, and vice versa? I am using Ajax to redirect to a query page. while($result = mysql_fetch_assoc($query1)) { echo "<option value=".$result['username' ...

javascriptphpjqueryajax

Steps for showcasing stars (1-5) based on the data stored in the database

I recently completed a project where I created a user achievement page that displays their progress. Within the page, there is a table containing the user's level. The table structure looks like this: Users( id, username, password, sum_score, level) ...

phphtmlcss