Applying the .active class to a button which reveals the corresponding div

Question

Applying the .active class to a button which reveals the corresponding div

I've been working on a menu that functions to open and hide divs within a single page.

My objective is to have the (.active) class applied to the currently selected menu item only when its connected div is open. When the div is closed or another menu item is selected, the class should either disappear or be transferred to the new menu item.

I attempted to use

$(".your_selector li").addClass("active");

but this code simply marks all menu items as active, which is not the desired outcome.

How would you approach solving this problem? Here is the fiddle http://jsfiddle.net/4DGUV/3/

Thank you in advance

jquery html css

Answer 1

Answer №1

Revise your code to use this script instead: http://jsfiddle.net/4DGUV/7/

$('document').ready(function () {
  $('button').click(function () {      //<----click the buttons
      $('button').removeClass('active'); //<-----remove the class from the button
      $(this).addClass('active'); //<---add the class to currently clicked button
      var $div = $('#' + $(this).data('href'));
      $('.demo').not($div).hide();
      $div.slideToggle();
   });
});

Alternatively, you can try a more optimized approach using this script: http://jsfiddle.net/4DGUV/8/

$('document').ready(function () {
  $('.menu li').click(function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

Make sure your HTML structure follows this format:

<div class="menu">
  <ul>
    <li> <a href='#' id="show2" data-href="vission1">news</a>

    </li>
    <li> <a href='#' id="show3" data-href="mteam">team</a>

    </li>
    <li> <a href='#' id="show1" data-href="mission1">download</a>

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

Answer 2

Revise your code to use this script instead: http://jsfiddle.net/4DGUV/7/

$('document').ready(function () {
  $('button').click(function () {      //<----click the buttons
      $('button').removeClass('active'); //<-----remove the class from the button
      $(this).addClass('active'); //<---add the class to currently clicked button
      var $div = $('#' + $(this).data('href'));
      $('.demo').not($div).hide();
      $div.slideToggle();
   });
});

Alternatively, you can try a more optimized approach using this script: http://jsfiddle.net/4DGUV/8/

$('document').ready(function () {
  $('.menu li').click(function () {
    $(this).siblings().removeClass('active');
    $(this).addClass('active');
    var $div = $('#' + $(this).data('href'));
    $('.demo').not($div).hide();
    $div.slideToggle();
  });
});

Make sure your HTML structure follows this format:

<div class="menu">
  <ul>
    <li> <a href='#' id="show2" data-href="vission1">news</a>

    </li>
    <li> <a href='#' id="show3" data-href="mteam">team</a>

    </li>
    <li> <a href='#' id="show1" data-href="mission1">download</a>

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

Answer 3

Answer №2

Make sure to include the following code snippet within a click event attached to an li element.

For instance:

$(".your_selector li").click(function(){
    $(this).addClass('active');
});

The reason this is necessary is because you are applying the addClass function to all li tags, so in order to target only the specific clicked li, you must specify that using jQuery.

Answer 4

Make sure to include the following code snippet within a click event attached to an li element.

For instance:

$(".your_selector li").click(function(){
    $(this).addClass('active');
});

The reason this is necessary is because you are applying the addClass function to all li tags, so in order to target only the specific clicked li, you must specify that using jQuery.

Answer 5

Answer №3

Here is a helpful snippet to utilize:

$(".your_selector li").on('click', function(){
    $(this).toggleClass('active');
});

Answer 6

Here is a helpful snippet to utilize:

$(".your_selector li").on('click', function(){
    $(this).toggleClass('active');
});

Applying the .active class to a button which reveals the corresponding div

Answer №1

Answer №2

Answer №3

Similar questions

What is the reason for the automatic loading of coffee files in app/assets/javascripts across all files?

What is the best way to utilize XMLHttpRequest for sending POST requests to multiple pages simultaneously?

restructure the HTML based on a jQuery condition

Is there a way to change the color of a checkbox (both the box and font) in the disabled state using material ui

Position a div at the bottom of another div using Bootstrap

Troubles with caching on Amazon S3

In JavaScript, when you update the property of a nested object within an array, the changes will also be applied to the same property for

Using CSS or Bootstrap, align the image to the right side of the content

Modify the text in a paragraph by clicking on a link using JQuery and HTML

Understanding the process of extracting map data from JSON files

What is the reason for the delay in the firing of this document.ready event

Mastering TailwindCSS: Enhancing your design with group-hover utilities for top, bottom, right, and left

Add the data object list to the serialized format

What is the process for closing the lightbox?

Error encountered when trying to access JSON data using jQuery due to a formatting issue

customized multiselect dropdown with grouping options using Bootstrap

Incorporate an MP3 audio track into an image

Upon the initial visit to the website, unregistered users will be prompted with a dialog box in Laravel asking them to confirm that they are over 18 years old

The data variable in Vue.js does not show up in the view even when it is populated through an AJAX request

It is not possible to highlight the text that appears in the title of the tooltip in React MUI