Display the selected tab or menu option as the highlighted element using JavaScript

Question

Display the selected tab or menu option as the highlighted element using JavaScript

This is not a jQuery inquiry. I am utilizing neither an <anchor> nor a list for my menu structure. My goal is to have the tab item in the menu appear in a different color when it is active. CSS pseudo-classes such as :active and :selection did not yield the desired outcome. The layout of my menu involves using a <label> within a <p> tag:

<div id="MainMenu">
   <p class="floatLeftP" id="SiteName">Site Name Here</p>
   <p class="floatLeftP"><label id="ViewLink1" onclick="mainMenuChg('Home')">HOME</label></p>
   <p class="floatLeftP"><label id="ViewLink2" onclick="mainMenuChg('Offered')">OFFERED</label></p>
   <p class="floatLeftP"><label id="ViewLink3" onclick="mainMenuChg('Input')">INPUT</label></p>
   <p class="floatLeftP"><label id="ViewLink4" onclick="mainMenuChg('Wanted')">WANTED</label></p>
   <p class="floatLeftP"><label id="ViewLink5" onclick="mainMenuChg('MyAccount')">My Account</label></p>
   <p class="floatLeftP"><label id="ViewLink6" onclick="openHTTPS()">Sign Up!</label></p>
   <p class="floatRightP"><label id="ViewLink7" onclick="openHTTPS()">Sign In</label></p>    
</div>

The usage of CSS :active typically applies to links, which are not being utilized in my setup.

Upon clicking most of the menu items, a function named mainMenuChg('argHere') is executed.

function mainMenuChg(argPage) {
    window.location.href = "#" + argPage;
};

This adjustment in the URL triggers an AngularJS router, however, I prefer employing only JavaScript without involving AngularJS. By using the code below, I can alter the color of a menu item:

document.getElementById(theID).style.color = "yellow";

However, the color remains unchanged once set. Clicking on another menu item results in multiple yellow-colored items. The desired functionality is to change the color of the current <label> while returning the previous one to its original color. Since each menu item has a distinct color, resetting to the default hue is indispensable.

I am seeking a method to retain the value of the old id without losing it by storing it in a variable. Defining the variable within the function appears to result in loss of its value.

While there are some jQuery solutions available, I specifically require a JavaScript-based approach.

javascript html css

Answer 1

Answer №1

Begin by assigning a class to all the labels.

For instance, use class="tab-label".

You can then make some modifications to the function and include an extra parameter.

function changeTab(pageName,labelId)

.

Update the labels to include...

onclick="changeTab('Homepage',this.id)">

Now let's dive into the function itself...

function changeTab(pageName,labelId) {
    //Remove existing color from all tabs
    var labels = document.getElementsByClassName("tab-label");
    //Loop through each label
    for(var i=0; i< labels.length; i++)
    {
         labels[i].style.color = "grey";
    }
    //Apply specific color to the clicked tab
    document.getElementById(labelId).style.color = "green";
    window.location.href = "#" + pageName;
};

Answer 2

Begin by assigning a class to all the labels.

For instance, use class="tab-label".

You can then make some modifications to the function and include an extra parameter.

function changeTab(pageName,labelId)

.

Update the labels to include...

onclick="changeTab('Homepage',this.id)">

Now let's dive into the function itself...

function changeTab(pageName,labelId) {
    //Remove existing color from all tabs
    var labels = document.getElementsByClassName("tab-label");
    //Loop through each label
    for(var i=0; i< labels.length; i++)
    {
         labels[i].style.color = "grey";
    }
    //Apply specific color to the clicked tab
    document.getElementById(labelId).style.color = "green";
    window.location.href = "#" + pageName;
};

Answer 3

Answer №2

You can try out the code snippet below to see if it solves your issue:

let prevElement; // global variable.

if(prevElement !== undefined) {
  prevElement.style.color = original_color;
}
this.style.color = "yellow";
prevElement = this;

Answer 4

You can try out the code snippet below to see if it solves your issue:

let prevElement; // global variable.

if(prevElement !== undefined) {
  prevElement.style.color = original_color;
}
this.style.color = "yellow";
prevElement = this;

Answer 5

Answer №3

With the generous contributions of everyone here, I have successfully devised a functional solution. You can find a complete working version on jsFiddle by following the link provided below. Take a look at the HTML snippet:

<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a>

        </li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a>

        </li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a>

        </li>
    </ul>
</div>

Here is the code implementation:

var menuHome = document.getElementById('xyz1');
var menuSave = document.getElementById('abc2');
var menuUser = document.getElementById('hij9');

menuHome.addEventListener('mouseup', clickedHome, false);
menuSave.addEventListener('mouseup', clickedSave, false);
menuUser.addEventListener('mouseup', clickedUser, false);

var currentMenuItem = '';

function clickedHome() {
    if (menuHome === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuHome.style.background = 'blue';
    //alert('currentMenuItem: ' + currentMenuItem);
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuHome);
}

function clickedSave() {
    if (menuSave === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuSave.style.background = 'cyan';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuSave);
}

function clickedUser() {
    //alert("home menu clicked: ");
    if (menuUser === currentMenuItem) {
        return;
    };
    menuUser.style.background = 'blue';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuUser);
}

function setCurrent(argMenu) {
    //alert("set current ran: ");
    currentMenuItem = argMenu;
    //alert('currentMenuItem: ' + currentMenuItem);
};

Experience this in action yourself by visiting the provided jsFiddle link.

Highlight Active Menu Item on Menu Bar

Answer 6

With the generous contributions of everyone here, I have successfully devised a functional solution. You can find a complete working version on jsFiddle by following the link provided below. Take a look at the HTML snippet:

<div id="menu">
    <ul>
        <li><a class="myMenu" id="xyz1" href="#" title="Update"><span>Home</span></a>

        </li>
        <li><a class="myMenu" id="abc2" href="#" title="Save"><span>Save</span></a>

        </li>
        <li><a class="myMenu" id="hij9" href="#" title="User"><span>User</span></a>

        </li>
    </ul>
</div>

Here is the code implementation:

var menuHome = document.getElementById('xyz1');
var menuSave = document.getElementById('abc2');
var menuUser = document.getElementById('hij9');

menuHome.addEventListener('mouseup', clickedHome, false);
menuSave.addEventListener('mouseup', clickedSave, false);
menuUser.addEventListener('mouseup', clickedUser, false);

var currentMenuItem = '';

function clickedHome() {
    if (menuHome === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuHome.style.background = 'blue';
    //alert('currentMenuItem: ' + currentMenuItem);
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuHome);
}

function clickedSave() {
    if (menuSave === currentMenuItem) {
        return;
    };
    //alert("home menu clicked: ");
    menuSave.style.background = 'cyan';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuSave);
}

function clickedUser() {
    //alert("home menu clicked: ");
    if (menuUser === currentMenuItem) {
        return;
    };
    menuUser.style.background = 'blue';
    if (currentMenuItem !== undefined && currentMenuItem !== "") {
        //alert("it ran: ");
        currentMenuItem.style.background = '';
    }
    setCurrent(menuUser);
}

function setCurrent(argMenu) {
    //alert("set current ran: ");
    currentMenuItem = argMenu;
    //alert('currentMenuItem: ' + currentMenuItem);
};

Experience this in action yourself by visiting the provided jsFiddle link.

Highlight Active Menu Item on Menu Bar

Display the selected tab or menu option as the highlighted element using JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

File Uploading with JavaScript

Unable to use the .focus() method on a Link component by utilizing references in React Router 4

Changing data in Chart.js, strategies for modifying data after chart creation!

The content div sits atop the full-width image instead of being displaced downwards

Ensuring IconButton is perfectly aligned with Text in one straight line

Changing the arrow in jQuery's slideToggle for different div elements is a breeze

I am currently working on creating a basic task tracker using Express, however, I am encountering difficulties in getting the 'delete' button to function properly

Using Jquery and AJAX to dynamically fill out an HTML form based on dropdown selection

Choose images at random from an array within a React Native application

Tips on scrolling down to find the text you're looking for

What steps can I take to create a responsive jQuery UI buttonset?

By simply clicking the link, the content comes to life with animation

What is the best way to create a cube in Three.js with the 4 corner points of the base and a specified height?

parallelLimit asynchronously executes in limited quantities once

Is it possible for me to trigger a custom event using an eventBus listener?

Setting the background color for a div in Vue.js when importing HTML

Why is this regular expression failing to match German words?

Guide on creating a toggle effect for a div with querySelector and addEventListener

Is it possible to utilize Javascript instead of PHP Curl to present JSON API data?

Updating a URL for all users using React/Next.js and Firebase: a guide to refreshing the page