1

私はこのタブシステムを持っています:

$(document).ready(function(){
    $('#tabs div').hide();
    $('#tabs div:first').show();
    $('#tabs ul li:first').addClass('active');
    $('#tabs ul li a').click(function(){
        if($(this).parent().hasClass('active')) {
            /** active **/
        } else {
            $('#tabs ul li').removeClass('active');
            $(this).parent().addClass('active');
            var currentTab = $(this).attr('href');
            $('#tabs div').hide();
            $(currentTab).show('slide', {}, 500);
        }
        return false;
    });
});

<div id="tabs">
        <ul>
            <li><a href="#tab-1">1</a></li>
            <li><a href="#tab-2">2</a></li>
            <li><a href="#tab-3">3</a></li>
            <li><a href="#tab-4">4</a></li>
            <li><a href="#tab-5">5</a></li>
        </ul>

        <div id="tab-1">
Content tab1
</div>
<div tab2... etc

URL の末尾に #tab-3 を追加すると、自動的にタブ 3 が表示され、クリックしなくてもタブ 3 がアクティブになります。

これは簡単な方法で可能ですか？

4

2 に答える 2

7

コードをさらに調べた後に編集-

DOM の準備が整うたびにこの 2 行をコーディングすると、常に最初のタブが表示されます。

$('#tabs div:first').show();
$('#tabs ul li:first').addClass('active');

最初のタブを表示するかどうかを決定する前に、まず「#tab」の URL を確認する必要があります。

$(function(){
    ...
    var hash = window.location.hash;
    if(hash){
        $('a[href="' + hash +'"]').parent('li').addClass('active');
        var elementID = hash.replace('#', '');
        $(elementID).show();
    } else {
        $('#tabs div:first').show();
        $('#tabs ul li:first').addClass('active');
    }
    ...
}
于 2012-08-09T18:13:29.757 に答える
2

これはおそらくうまくいくはずです：

$(window).bind( 'hashchange', function( event ) {
    var hash=window.location.hash;
    if(!hash){return;}
    $('a[href="'+hash+'"]').click();
});​
$(window).trigger('hashchange');
于 2012-08-09T18:19:47.237 に答える