.hide/.show jumps to top of page or shows div name in url
<p>The <code>.hide</code>/<code>.show</code> functions jump to top of page with <code>return false</code>, but shows div name in url with <code>preventDefault</code>.</p>

<pre><code>&lt;script type="text/javascript"&gt;

$(document).ready(function() {

//Default Action
$(".ar-tab-content").hide(); //Hide all content
$("ul.ar-tabs li:first").addClass("active").show(); //Activate first tab
$(".ar-tab-content:first").show(); //Show first tab content

//On Click Event
$("ul.ar-tabs li").click(function() {
    $("ul.ar-tabs li").removeClass("active"); //Remove any "active" class
    $(this).addClass("active"); //Add "active" class to selected tab
    $(".ar-tab-content").hide(); //Hide all tab content
    var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    return false;
});

});
&lt;/script&gt;

  &lt;ul class="ar-tabs"&gt;
    &lt;li&gt;&lt;a href="#ar-tab1" name="ar-tab1"&gt;Why you should join&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#ar-tab2" name="ar-tab2"&gt;What members are saying&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>
