WordPress在单击每个子选项卡名称时如何显示选项卡内容?

时间:2018-10-10 14:44:19

标签: jquery wordpress tabs html-lists

我正在WordPress自定义页面上,我已经在自定义模板页面中添加了jquery ul tabs

1)现在,单击父选项卡的子选项卡后,如何在选项卡面板中获取内容?

2)First标签应该处于打开状态,直到单击另一个sub-tabs为止。

3)问题是,当我根据static content添加了content标签并显示sub tab id却没有显示dynamic content的jquery标签时。动态单击sub-tab后没有显示任何内容?

**Jquery**

    <script type="text/javascript">

     window.onload=function(){

     $(function() {
        $( "#tabs" ).tabs();
    });
    $(document).ready(function() {
    $(".menu a").click(function(){
        $(".video").each(function(){
            $(this).get(0).pause();
    })
    });
    //tabbing selection
    $(".menu li:eq(0)").addClass("active");
    $(".menu li").click(function(){
        $(this).addClass('active');
        $(this).siblings().removeClass('active');       
        }); 

    $(".tabs").click(function(){
        $(".subtabsinner").slideUp();
        $(this).siblings().removeClass('active');   
    });
    $(".subtabs").click(function(){
    $(this).nextUntil("li.parent").slideToggle();
       $(this).removeClass('active');
       $(this).next().addClass('active');
    });

    });

    }

    </script>

     <div class="container">
   <div id="tabs" style="display: inline-flex;">
      <div class="row">
         <div class="col col-lg-3 col-md-3">
            <div class="leftmenu">
               <div class="menu">
                  <ul class='resourcepage'>
                     <?php 
                        $terms = get_terms('resourcecategories');
                        if ( !empty( $terms ) && !is_wp_error( $terms ) ){

                        //parent tab name   
                        foreach ( $terms as $term ) {
                        echo "<li class='parent subtabs tabsclose'><span>" . $term->name . "</span></li>";

                        $music_args = array(
                        'post_type' => 'resourceverticaltabs',
                        'orderby' => 'title',
                        'order' => 'ASC',
                        'hierarchical' => false,
                        'resourcecategories' => $term->name
                        );

                           //sub tab name           
                        $musicians = get_posts($music_args);
                        foreach ($musicians as $musician) {
                        echo ' <li class="subtabsinner"><a href="#'.$musician->ID.'">'.$musician->post_title.'</a></li>';
                        }


                        }

                        }?>
                  </ul>
               </div>
            </div>
         </div>
         <div class="col col-lg-8 col-md-8">
            //tab content
            <div class="rightmenu">
               <?php $musicians = get_posts($music_args);  foreach ($musicians as $musician) {?> 
               <div id="<?php echo $musician->ID ?>" style="border:2px solid red">
                  <?php echo $musician->the_content ?>
               </div>
               <?php } ?>
            </div>
         </div>
      </div>
   </div>
</div>

静态内容链接 Static Content

0 个答案:

没有答案