代码之家  ›  专栏  ›  技术社区  ›  Tncmk

如果没有内容,则隐藏选项卡

  •  0
  • Tncmk  · 技术社区  · 7 年前

    Brochures Resources 选项卡。代码运行得非常好,唯一的问题是当这些选项卡中的任何一个为空时,选项卡不会消失。空的标签内容链接仍然存在。我探索并应用了不同的脚本,但每次尝试都以失败告终。

    希望你们能帮我。

    对不起,我的代码有点长。

    <div class="publication-slide-container">
        <ul class="tab-links">
        <li class="active"><a href="#brochure">Brochures</a></li>
        <li><a href="#article">Resources</a></li>
        </ul>
    
    <div class="tab-content">
      <div class="publication-slide full-slider active" ID="brochure">
        <?php
    $terms = wp_get_post_terms($post->ID, array( 'publication-category', 'publication-type'), $args );
    
    foreach( $terms as $term ) {
      $args = array(
          'post_type'           => 'publication',
          'orderby'             => 'date',
          'order'               => 'ASC',
          'post_status'         => 'publish',
          'posts_per_page'      => - 1,
          'tax_query'           => array(
              'relation' => 'AND',
              array(
                  'taxonomy'    => 'publication-category',
                  'field'       => 'slug',
                  'terms'       => array( $term->slug)
              ),
              array(
                  'taxonomy'    => 'publication-type',
                  'field'       => 'slug',
                  'terms'       => array( 'brochure' )
              )
          )
      );
    
      $my_query = new WP_Query($args);
      if ($my_query->have_posts()) {
            while ($my_query->have_posts()) : $my_query->the_post(); ?>
    
               // something here
    
              <?php
              endwhile;
      } 
      wp_reset_postdata();
    }
    ?>
      </div>
    
    <div class="publication-slide full-slider" style="display:none;" ID="article">
    
        <?php
    $terms = wp_get_post_terms($post->ID, array( 'publication-category', 'publication-type'), $args );
    
    foreach( $terms as $term ) {
      $args = array(
          'post_type'           => 'publication',
          'orderby'             => 'date',
          'order'               => 'DESC',
          'post_status'         => 'publish',
          'posts_per_page'      => 10,
          'tax_query'           => array(
              'relation' => 'AND',
              array(
                  'taxonomy'    => 'publication-category',
                  'field'       => 'slug',
                  'terms'       => array( $term->slug)
              ),
              array(
                  'taxonomy'    => 'publication-type',
                  'field'       => 'slug',
                  'terms'       => array( 'article', 'ASEAN Insiders', 'Expert Commentary' )
              )
          )
      );
    
      $my_query = new WP_Query($args);
      if ($my_query->have_posts()) {
            while ($my_query->have_posts()) : $my_query->the_post(); ?>
    
            //something here
    
      <?php
              endwhile;
      } 
      wp_reset_postdata();
    }
    ?>
      </div>
    
    </div>
    

    我的剧本是

    <script>
    jQuery(document).ready(function() {
        jQuery('.publication-slide-container .tab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
    
    
               jQuery('.publication-slide-container ' + currentAttrValue).show().siblings().hide();
    
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    
            e.preventDefault();
        });
    });
    </script>
    
    1 回复  |  直到 7 年前
        1
  •  1
  •   Bendy Zhang    7 年前

    您可以尝试以下代码来删除空选项卡:

    <script>
    jQuery(document).ready(function() {
        jQuery('.publication-slide-container .tab-links a').on('click', function(e) {
            var currentAttrValue = jQuery(this).attr('href');
    
    
               jQuery('.publication-slide-container ' + currentAttrValue).show().siblings().hide();
    
                jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
    
            e.preventDefault();
        });
    
     // below is my code.
          jQuery('.publication-slide-container .tab-content .publication-slide').each(function() {
            if (!jQuery(this).text().trim()) {   // empty .publication-slide
              jQuery('.publication-slide-container .tab-links')
                .find('a[href="#' + jQuery(this).attr('id')+'"]').parent().remove();   // remove related <li></li>
            }
        });
    });
    </script>