0

次のコードを使用して、デフォルトで最初のタブを表示しています。

 // SELECT OUR FIRST TAB BY DEFAULT
 $('.tabs-nav LI:first').addClass('active');
 $('.tabContent').hide();
 $('.tabContent:first').show();

 // FORWARD TAB LI CLICKS TO TAB A CLICKS
 $('.tabs-nav LI').click(function(e){
    e.preventDefault();
    $(this).find('A').click();
    return false;
 });

 // INTERCEPT TAB A CLICKS TO SET THE ACTIVE TAB AND SHOW TAB PANEL.
 $('.tabs-nav LI A').click(function(e){
    e.preventDefault();
    $('.tabs-nav LI').removeClass('active');
    $('.tabContent').hide();
    $(this).parent().addClass('active');
    var sID = $(this).attr('href');
    sID = sID.split('#').join('');
    $('#' + sID).fadeIn(400, function() {
        $(window).trigger('resize');
    });
    return false;
 });

});

タブを表示するための私のコードは次のとおりです。

        <?php  
        $aerialSlider = do_shortcode('[property_attribute attribute=aerial_slider]');
        $propertySlider = do_shortcode('[property_attribute attribute=property_slider]');
        $lodgecabinSlider = do_shortcode('[property_attribute attribute=lodgecabin]');
        $wildlifeSlider = do_shortcode('[property_attribute attribute=wildlife_slider]');
        $videosSlider = do_shortcode('[property_attribute attribute=videos_slider]');
    ?>

    <div class="tabs">
        <h1>PHOTO GALLERY</h1>
        <ul class="tabs-nav">
            <?php if(empty($aerialSlider)) { 
                } else { 
                    echo '<li><a href="#tab1" >AERIALS</a></li>';
                } 
            ?>
            <?php if(empty($propertySlider)) { 
                } else { 
                    echo '<li><a href="#tab3" >PROPERTY</a></li>';
                } 
            ?>
            <?php if(empty($lodgecabinSlider)) { 
                } else { 
                    echo '<li><a href="#tab2" >LODGE/CABIN</a></li>';
                } 
            ?>
            <?php if(empty($wildlifeSlider)) { 
                } else { 
                    echo '<li><a href="#tab4" >WILDLIFE</a></li>';
                } 
            ?>
            <?php if(empty($videosSlider)) { 
                } else { 
                    echo '<li><a href="#tab5" >VIDEOS</a></li>';
                } 
            ?>
        </ul>

これを行うと、ユーザーはショートコードを挿入してタブに表示することができ、ショートコードはギャラリーを表示するだけです。次に、そのフィールドのメタボックスに何も入力されていない場合、タブが表示されないように作成しました。そこに何もない場合、タブを表示しても意味がありません。問題は、最初のタブ メタ フィールドに何も挿入されていない場合、ギャラリー スペースが折りたたまれていることです。タブをクリックすると表示されます。

問題は、jquery が最初のタブをターゲットにしているようですが、最初に表示されるタブをデフォルトのタブにする必要があります。私の問題が明確だったことを願っています。誰でも私を助けることができますか？jqueryに関しては初心者なので、どんな助けでも大歓迎です。

前もって感謝します！

4

1 に答える 1

0

今夜は目が疲れすぎて、あなたのコードの壁を見ることができません。なぜこれだけではないのですか？

$( ".tabs-nav" ).tabs({ active: 1 });

http://api.jqueryui.com/tabs/#option-active

于 2013-03-13T02:50:41.887 に答える