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