jquery实现选项卡

107 阅读1分钟

GIF 2021-8-30 星期一 17-22-31.gif html

<div>
    <div class="dindan_header">
        <p class="togle_xz">全部订单</p>
        <p>已付款</p>
        <p>待付款</p>
     </div>
</div>
 <div class="togle_show none">
   1
</div>
<div class="togle_show none">
   2
</div>
<div class="togle_show none">
   3
</div>

js

    <script>
    $(".dindan_header p").each(function(index) {
        $(this).click(function() {
             $(this).addClass("togle_xz").siblings().removeClass("togle_xz");
             $('.togle_show').eq(index).show().siblings('.togle_show').hide()
         })
    })
 </script>