onClick清除类功能

Question

I have the following code set-up to clear the class of the other tab when it's clicked. Its build in wordpress so there might be a bit of wordpress code in there. Basicly what i'm trying to achieve is when you click on tab1 the class of tab2 clears and the other way around, also when you click on tab1, tab1 should recieve a class. I believe my code should work but it doesnt. Does anyone know what i did wrong?

                            <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

When you click on a link it removes the class from your parent his siblings (the <li>) and then you add a class to your own parent (also a <li>).

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