CODEWITHSUNDEEP
javascriptjqueryhtml
Pascal Boschma
Pascal Boschma

Reputation: 197

How to change content with HREF Click jQuery

Hello Stackers,

I'm having another problem now, and this time it is one, where I'm not even knowing how to start the code. I Have 3 links, and four divs. One DIV is the default, and the others are when clicking on the link. Only, I Want it to hide and show the div with jQuery, which I'm not that good at.

I Know this won't work with anchors, or does it?

<a href="#div1">SHOW DIV1</a>
<a href="#div2">SHOW DIV2</a>
<a href="#div3">SHOW DIV3</a>

<div id="default">Default Content</div>
<div id="1">DIV 1 Content</div>
<div id="2">DIV 2 Content</div>
<div id="3">DIV 3 Content</div>

Is this even possible?

Upvotes: 0

Views: 123

Answers (1)

DinoMyte
DinoMyte

Reputation: 8868

Try this : 

 $().ready(function(){   
    $('div').not('#default').hide(); // hide all divs except for 'default' on page load     
    $('a').click(function(e) // bind a click event on the anchor tags
    {
      $('div').not('#default').hide();; // hide all divs except for 'default'
      e.preventDefault(); 
      var container = $(this).attr('href').replace('#div',''); // find the corresponding div to show using the 'href' attribute 
      $("#" + container).show(); // show that div
    });
  });

Example : https://jsfiddle.net/s8131f7e/1/

Upvotes: 1

Related Questions