jquery a href recognition

Question

I have a page in which there are multiple hrefs. i want to find out which href is clicked and based on that href click i want to show and hide a div?

Answer 1

You could attach a click handler to the anchor:

$(function() {
    $('a').click(function() {
        var href = this.href;
        // test the href and show/hide the div:
        $('#someDiv').show();

        // return false to avoid following the link
        return false;
    });
});

Answer 2

This should give you something to start with:

$('a').click(function()
{
    var href = this.href;

    // Show/hide your div.
    return false;
});

Just implement your logic in the click handler function.

Answer 3

You can do like:

$(function(){
 $('a').click(function(){
   alert('I was clicked, here my href = ' +  $(this).attr('href'));
   $('#div_id').slideToggle('slow'); // show hide div
   return false;
 });
});

Answer 4

You say you want to choose the div based on the href, and that can be done, but it's relatively hard compared to some other mechanisms. Typically, I find that there is some relationship in the DOM structure that I can exploit instead or I can add classes to the link/div to make the solution simpler. For example, it's often the case that the link is next to or in the same container as the div to show. In this case you can traverse the DOM and select the div that is the sibling or a child of the same container.

Some examples:

Link in the same container

 $('a.menu-item').click( function() {
      $('div.content').hide(); // hide all items
      $(this).parent().find('div.content').show(); // show associated item
 });

Link in the same order as the divs

 $('a.menu-item').click( function() {
      var index = $('a.menu-item').eq(this).index();  // get index
      $('div.content').hide().eq(index).show(); // hide all, show corresponding
 });

With the same class (assumes link as a single, unique, shared class with div)

 $('a').click( function() {
     $('div.content').hide();
     $('div').hasClass( $(this).attr('class') ).show();
 });

Answer 5

I'm going to assume you have control over the href's here and you want to have the simplest markup possible, in that case you can do something like this:

<a href="#div1">Toggle Div 1</a>
<a href="#div2">Toggle Div 2</a>

<div id="div1" class="toggleDiv">Div 1 Content</div>
<div id="div2" class="toggleDiv">Div 2 Content</div>

Then to open/toggle a div based on the href, or more specifically the hash property, you can do this:

$("a").click(function() {
    $(".toggleDiv").not(this.hash).hide();
    $(this.hash).toggle('fast');
});​​​

This toggles the corresponding <div> with the matching ID == href minus the hash and hides the other <div> elements if that's what you're after...you do this by just giving them a common class and hide all those except the one related to the current link.

You can view a demo here to see if it's what you're after.