Question

我的内容框位于页面中间。当我单击选项卡时，页面将滚动到中间（位于选项卡内容框中）。

这是由于哈希标记链接造成的如何在没有页面滚动到中间的情况下打开选项卡？

<ul class="tabs">
    <li><a href="#movies" class="defaulttab" rel="movies">movies</a></li>
    <li><a href="#comments" rel="comments">Comments</a></li>
</ul>

<div class="contentbox">
    <div class="tab-content" id="movies">
        content 1
    </div>
    <div class="tab-content" id="comments">
        Tab #2 content
    </div>

jquery的

$(document).ready(function() {
    $('.tabs a').click(function() {
        switch_tabs($(this));
    });
    switch_tabs($('.defaulttab'));
});

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs a').removeClass("selected");
    var id = obj.attr("rel");
    $('#' + id).show();
    obj.addClass("selected");
}

$(function() {
    var hash = window.location.href.split('#').pop();
    var allowed = ['movies', 'comments'];
    if (allowed.indexOf(hash) == -1) hash = allowed[0];
    switch_tabs($('a[href=#' + hash + ']'));
});

http://jsfiddle.net/d6bts/3/

Answer 1

首先将ev参数添加到click函数，然后按以下方式调用它，使用ev.preventDefault：

$('.tabs a').click(function (ev) {
    ev.preventDefault();

    var $this = $(this);
    $('.tabs a').removeClass("selected");
    $this.addClass('selected');
    switch_tabs($this.attr('href'));
    return false;
});

Jquery哈希标记链接到Tabs问题

1 个答案: