jquery to display diffrent text onclick
<p>I have this current script which works great for changing class names</p>

<pre><code>    $('#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');

    });

              &lt;ul&gt;
                   &lt;li&gt;&lt;a href="" class="current"&gt;one&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;two&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;three&lt;/a&gt;&lt;/li&gt;
                   &lt;li&gt;&lt;a href="#"&gt;four&lt;/a&gt;&lt;/li&gt;
               &lt;/ul&gt;
</code></pre>

<p>Now i have 4 diffrent div's area</p>

<pre><code>    &lt;div id="first"&gt;some text and form&lt;/div&gt;
    &lt;div id="second"&gt;some text and form&lt;/div&gt;
    &lt;div id="third"&gt;some text and form&lt;/div&gt;
    &lt;div id="last"&gt;some text and form&lt;/div&gt;
</code></pre>

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

<p>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</p>
