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

时间:2018-10-10 18:45:33

标签: jquery html wordpress tabs html-lists

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

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

2)First Tab应该处于打开状态并处于活动状态,直到单击另一个parent tab为止。

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>

**Html and Php Code**

    <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">


     <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 个答案:

没有答案