2

私は jQuery タブの実装を使用しており、すべてうまく機能しますが、たとえばhttp://www.mydomain.com/tabs.html#tab2などの URL にリンクして、タブ 2 でページを自動的に開くことができるようにしたいと考えています。これまでのところ、私はhttp://jsfiddle.net/Jmx7k/にいます

<script>
jQuery(document).ready(function() {
    jQuery('#tabs2 li a:not(:first)').addClass('inactive');
    jQuery('.container:not(:first)').hide();

    jQuery('#tabs2 li a').click(function() {
        var t = jQuery(this).attr('href');
        if (jQuery(this).hasClass('inactive')) { //added to not animate when active
            jQuery('#tabs2 li a').addClass('inactive');
            jQuery(this).removeClass('inactive');
            jQuery('.container').hide();
            jQuery(t).fadeIn('slow');
         }
    return false;
}) //end click
});​
</script>
    <div id="tabs2holder">
        <ul id="tabs2">
        <li><a href="#tab1">Test Tab 1</a></li>
        <li><a href="#tab2">Test Tab 2</a></li>
    </ul>
</div>

<div class="container" id="tab1">
    This is test content for tab1
</div>


<div class="container" id="tab2">
     This is test content for tab2
</div>

誰かがこの機能を追加する正しい方向に私を向け、現在これを行わない理由を説明できますか?

ありがとう

4

1 に答える 1

4

わかりました。ハッシュ部分 (「#tab2」など) を含む URL を作成する場合は、この値を次のように取得できます。

var hash = location.hash; // hash = '#tab2'

このようにコードを変更します

jQuery(document).ready(function() {
    jQuery('#tabs2 li a:not(:first)').addClass('inactive');
    jQuery('.container:not(:first)').hide();

    jQuery('#tabs2 li a').click(function() {
        var t = jQuery(this).attr('href');
        if (jQuery(this).hasClass('inactive')) { //added to not animate when active
            jQuery('#tabs2 li a').addClass('inactive');
            jQuery(this).removeClass('inactive');
            jQuery('.container').hide();
            jQuery(t).fadeIn('slow');
        }
        return false;
    }); //end click

    if (location.hash == '#tab2') {
        // don't forget to put id-attributes to your li-elements
        jQuery('#tablink2 a').trigger('click');
    }
});​

こちらも参照してください: http://jsfiddle.net/Jmx7k/8/ by jsfiddle ハッシュ属性は javascript-area に影響を与えていません :-( 通常のコンテキストで試してください。

于 2012-12-18T09:27:08.810 に答える