Question

我有以下代码设置，以便在单击时清除其他选项卡的类。它构建在wordpress中，因此可能会有一些wordpress代码。基本上我想要实现的是当你点击tab1时tab2的类清除，反之亦然，当你点击tab1时，tab1应该接收一个类。我相信我的代码应该可行，但它没有。有谁知道我做错了什么？

                            <ul class="tab-links">
                                <?php if(get_field('tab_1_-_naam', $id)): ?>
                                    <li class="active1"><a onclick="$(".active2").hide();" href="#<? echo $slug; ?>_tab_<?php echo $id; ?>-1"><?php the_field('tab_1_-_naam', $id); ?></a></li>
                                <?php endif; ?>


                                <?php if(get_field('tab_2_-_naam', $id)): ?>
                                    <li class="active2"><a onclick="setColor(this,'#FFF');". "this.style.color='#5D3B08!important';" href="#<? echo $slug; ?>_tab_<?php echo $id; ?>-2"><?php the_field('tab_2_-_naam', $id); ?></a></li>
                                <?php endif; ?>
                            </ul>

<script type="text/javascript">
  $(function(){
    $(".active2").hide();
  });
</script>

Answer 1

当您点击某个链接时，它会从您的父级（<li>）中移除该类，然后您将一个类添加到您自己的父级（也是<li>）。

<script type="text/javascript">
  $(function(){
    $(".active2").hide();
    $(".tab-links a").click(function(){
        $(this).parent().siblings().removeClass('active');
        $(this).parent().addClass('active');
    });
  });
</script>

Answer 2

     <script type="text/javascript">
     $(function(){
       $('.active1 a').click(function(e){
          //make tabs2 inactive
          $('.active2').removeClass('active');
          // make tab1 active
          $(.active1).addClass('active');    
      });

      $('.active2 a').click(function(e){
        //make tabs1 inactive
        $('.active1').removeClass('active');
        // make tab2 active
        $(.active2).addClass('active');    
     });
  });
</script>
And In **active** class add css for active tab.

onClick清除类功能

2 个答案: