Question

我使用以下代码默认显示第一个标签：

 // 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时，我是一个菜鸟，所以任何帮助都会受到赞赏。

提前致谢！

Answer 1

今晚我的眼睛太累了，无法查看你的代码墙。为什么不呢？

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

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

默认情况下使用jquery使第一个选项卡显示为活动状态？

1 个答案: