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 回答