Question

I have this current script which works great for changing class names

    $('#mydiv li a').click(
    function(e) {
      e.preventDefault(); // prevent the default action
      e.stopPropagation(); // stop the click from bubbling
      $(this).closest('ul').find('.current').removeClass('current');
      $(this).addClass('current');

    });

              <ul>
                   <li><a href="" class="current">one</a></li>
                   <li><a href="#">two</a></li>
                   <li><a href="#">three</a></li>
                   <li><a href="#">four</a></li>
               </ul>

Now i have 4 diffrent div’s area

    <div id="first">some text and form</div>
    <div id="second">some text and form</div>
    <div id="third">some text and form</div>
    <div id="last">some text and form</div>

which i have hidden with jquery like $(#second).hide(); $(third).hide();$(last).hide();
so when page loads one #first is visible on page, if i click on second href from above list item i wants to initialize $(second).show(); and hide other 3 div’s, if i click on 3rd href from above list i wants to display $(#third).show(); and so on.

So from 4 div’s only one should be visible on page.
can someone help me to show how i can achieve it with above code?
Thanks

Answer 1

$('#mydiv li a').click(function(e) {
  $(this).closest('ul').find('.current').removeClass('current');
  $(this).addClass('current');

  $(this.href).show().siblings().hide();
  return false;
});


<ul>
  <li><a href="#first" class="current">one</a></li>
  <li><a href="#second">two</a></li>
  <li><a href="#third">three</a></li>
  <li><a href="#last">four</a></li>
</ul>

<div id="first">some text and form</div>
<div id="second">some text and form</div>
<div id="third">some text and form</div>
<div id="last">some text and form</div>