Question

.hide / .show个函数使用return false跳转到页面顶部，但在网址中显示带有preventDefault的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>

Answer 1

编辑 您需要调整代码以补偿$(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;
});

Answer 2

试试这个

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

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

2 个答案: