Question

The .hide/.show functions jump to top of page with return false, but shows div name in url with preventDefault.

<script type="text/javascript">

$(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;
});

});
</script>

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

Answer 1

EDIT: you need adjust your code to compensate for $(this) being the <a />

Here is a quick attempt:

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