如何将选项卡“ALL”动态添加到菜单选项卡

Posted 2023-05-09

【中文标题】如何将选项卡“ALL”动态添加到菜单选项卡

【英文标题】：How to add tab "ALL" to menu tab dynamically

【发布时间】：2021-10-23 20:35:24

【问题描述】：

我有一个动态标签列表，我想添加一个标签“全部” 点击tab 3all" 显示所有罐子

对于此代码，它只显示动态选项卡，因此，我正在寻找添加选项卡“全部”的解决方案

我尝试了一些解决方案，但我没有到达

它的想法是添加 atatic 选项卡“全部”

 <?php
    echo '<ul class="nav nav-tabs" role="tablist">';
    $args = array(
        'taxonomy' => 'annualreports_category',
        'hide_empty'=>0,
        'orderby' => 'name',
        'order' => 'ASC'
    );
    $categories = get_categories($args);
    foreach($categories as $category)  
        echo 
            '<li>
                <span data-href="'.$category->slug.'" role="tab" data-toggle="tab">    
                    '.$category->name.'
                </span>
            </li>';
    
    echo '</ul>';
    
    echo '<div class="investors-content">';
    foreach($categories as $category)  
        echo '<div class="tab-pane" id="' . $category->slug.'">';
        $catslug = $category->slug;
        $the_query = new WP_Query(array(
            'post_type' => 'annualreports_post',
            'posts_per_page' => -1,
            'tax_query' => array(
                            array(
                                'taxonomy' => 'annualreports_category',
                                'field'    => 'slug',
                                'terms'    => array( $catslug ),
                                'operator' => 'IN'
                            ),
                        ),
        ));                 
        while ( $the_query->have_posts() ) : 
        $the_query->the_post();
            echo '<h1>';
            the_title();
            echo '</h1>';
        endwhile; 
        echo '</div>';
     
    echo '</div>';
    ?>

<script>

$(".investors-content .tab-pane").each(function()
    $(this).hide();
    $('.investors-content .tab-pane:first-child()').show();
);

$('.nav-tabs li>span').on( "click", function(e) 
    e.preventDefault();
    var id = $(this).attr('data-href');
    $(".investors-content .tab-pane").each(function()
        $(this).hide();
        if($(this).attr('id') == id) 
            $(this).show();
        
    );
);

【问题讨论】：

你在使用 bootstrap 3/4 吗？

【参考方案1】：

检查此工作示例类似于您的要求

$('#tabAll').on('click',function()
  $('#tabAll').parent().addClass('active');  
  $('.tab-pane').addClass('active in');  
  $('[data-toggle="tab"]').parent().removeClass('active');
);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  
  <div class="container">
  <h2>Dynamic Tabs</h2>
  <p>To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a div element with class .tab-content.</p>

  <ul class="nav nav-tabs">
  <li><a id="tabAll" href="#">All</a></li>
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
    <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
  </ul>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
  </div>
</div>