hide /.显示跳转到页面顶部或在url中显示div名称



.hide/.show函数以return false跳转到页面顶部,但以preventDefault显示url中的div名称。

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

EDIT: 你需要调整你的代码来补偿$(this)<a />

这里是一个快速的尝试:

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

试试这个

//On Click Event
$("ul.ar-tabs li a").click(function(e) {
    $(this).closest("li").removeClass("active").addClass("active"); 
    $(".ar-tab-content").hide(); //Hide all tab content
    var activeTab = this.href; //Find the rel attribute value to identify the active tab + content
    $(activeTab).fadeIn(); //Fade in the active content
    e.preventDefault();
});

最新更新