Alter div elements with jQuery based on the particular link that was selected

Question

Alter div elements with jQuery based on the particular link that was selected

I'm struggling with updating a nav bar that has different divs based on the link clicked.

    <script>
    $(document).ready(function (){

      $("#content").load("content/index_content.php");
      $('a').click(function(){
        $('#content').load($(this).attr('href'));
        $('#nav_' + 'a' + "active");
        return false;
      });
    });
    </script>

    <span id="nav">
        <a href="content/index_content.php"><div id="nav_home_active></div></a><a href="content/news_content.php"><div id="nav_news"> 
    </div></a>
    <a href="content/staff_content.php"><div id="nav_staff"></div></a>
    <a href="stats.php"><div id="nav_stats"></div></a>
    <a href="content/contact_content.php"><div id="nav_contact"></div> 
    </a>
    </span>

I'm having trouble concatenating the word "active" to reflect the current page and change the button on line 7 of the jquery block. Any suggestions on how to achieve this?

Appreciate any help, thank you!

jquery html css

Answer 1

Answer №1

Check out this code snippet:

 $(document).ready(function (){

      $("#content").load("content/index_content.php");

      $('a').click(function(){
        $('#content').load($(this).attr('href'));

        let newId = $(this).children("div").attr("id") + "_active";
        $(this).children("div").attr("id", newId);

        return false;
      });

    });

However, consider removing all occurrences of "_active" from the links when a different link is clicked. As handling ids can be tricky in this scenario, using classes might be a better option. You probably have distinct css styles for `nav_home` and `nav_home_active`. In such cases, using classes is more appropriate. Simply define a class "active" and apply the necessary css properties by adding or removing this class.

Here's an example to illustrate:

 $(document).ready(function(){

      $("#content").load("content/index_content.php");

      $('a').click(function(e){

        // Prevent the page from jumping to another position
        e.preventDefault(); 

        // Remove the active class from all divs inside <span id="nav">
        $("#nav div").removeClass("active");

        // Add the active class to the clicked link 
        $(this).children("div").addClass("active"); 

        $('#content').load($(this).attr('href')); 


      });

    });

Answer 2

Check out this code snippet:

 $(document).ready(function (){

      $("#content").load("content/index_content.php");

      $('a').click(function(){
        $('#content').load($(this).attr('href'));

        let newId = $(this).children("div").attr("id") + "_active";
        $(this).children("div").attr("id", newId);

        return false;
      });

    });

However, consider removing all occurrences of "_active" from the links when a different link is clicked. As handling ids can be tricky in this scenario, using classes might be a better option. You probably have distinct css styles for `nav_home` and `nav_home_active`. In such cases, using classes is more appropriate. Simply define a class "active" and apply the necessary css properties by adding or removing this class.

Here's an example to illustrate:

 $(document).ready(function(){

      $("#content").load("content/index_content.php");

      $('a').click(function(e){

        // Prevent the page from jumping to another position
        e.preventDefault(); 

        // Remove the active class from all divs inside <span id="nav">
        $("#nav div").removeClass("active");

        // Add the active class to the clicked link 
        $(this).children("div").addClass("active"); 

        $('#content').load($(this).attr('href')); 


      });

    });

Answer 3

Answer №2

To access the element that a jQuery event handler is responding to, you can utilize $(this) within the handler function.

For example:

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    return false;
  });
});

This code segment will apply the class active to the clicked link and remove it from other sibling links. You can then use a.active to target the active link.

UPDATE

If you intended to modify div elements rather than links, you can use $(this).children('div') in the event handler to access the specific div within the clicked link.

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    $(this).children('div').addClass('active');

    return false;
  });
});

Answer 4

To access the element that a jQuery event handler is responding to, you can utilize $(this) within the handler function.

For example:

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    return false;
  });
});

This code segment will apply the class active to the clicked link and remove it from other sibling links. You can then use a.active to target the active link.

UPDATE

If you intended to modify div elements rather than links, you can use $(this).children('div') in the event handler to access the specific div within the clicked link.

$(document).ready(function (){
  $("#content").load("content/index_content.php");

  $('a').click(function(){
    $('#content').load($(this).attr('href'));

    $(this).addClass('active').siblings().removeClass('active');

    $(this).children('div').addClass('active');

    return false;
  });
});

Alter div elements with jQuery based on the particular link that was selected

Answer №1

Answer №2

Similar questions

Turn off the autofill option for passwords in Google Chrome

Can you tell me why the jquery datepicker control is only loading a portion of the CSS?

Here is how to display a text box instead of a dropdown select box when receiving a null value from a JSON response

Tips on using the Hover property in CSS for an element that includes both :after and :before properties

Combining Two Ajax Forms

Looking for guidance on JavaScript - Implementing a different font family for each div element

Designing Interactive Interfaces using React Components for Dynamic Forms

Mistakes in the Horizontal Alignment of Bootstrap Forms

Tips for Personalizing Bootstrap 4.3 Through BootstrapCDN

Employing bootstrap to include oversized images within a compact, fixed div

Providing real-time results as numbers are added together

Deleting an item using jQuery

Obtaining a date and time in PHP from a JavaScript array

Customize Your Calendar: A Guide to Disabling Dates with Pikaday.js

The page fades in as soon as it is loaded thanks to the "

Adjust the body class dynamically based on the URL in AngularJS

Is it possible to declare variables using the "this" keyword?

Unlock the power of viewing numerous inputs simultaneously

choose an option with the jquery method and create it

Having trouble with the visibility of the hover background?