0

マイ コンテンツ ボックスは、ページの中央にあります。タブをクリックするたびに、ページが中央 (タブのコンテンツ ボックスがある場所) にスクロールします。

これはハッシュタグリンクによるものです。
ページを中央にスクロールせずにタブを開く方法は?

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

4

1 に答える 1

1

最初に引数を関数にev.preventDefault追加してから、次のように呼び出して使用します。evclick

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

    var $this = $(this);
    $('.tabs a').removeClass("selected");
    $this.addClass('selected');
    switch_tabs($this.attr('href'));
    return false;
});
于 2012-06-20T11:37:12.750 に答える