选项卡案例—基于jquery

最新推荐文章于 2024-09-10 14:15:01 发布

maodoudou.

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量86

点赞数

分类专栏： jquery 练习demo 文章标签： jquery html css

本文链接：https://blog.csdn.net/abcd2923/article/details/109956375

版权

jquery 练习demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

用作记录自己的学习练习，css样式比较简陋，没有细写…

<div class="tab">
   <div class="opation_li">
       <ul>
           <li>未付款</li>
           <li>已付款</li>
           <li>已发货</li>
           <li>未发货</li>
       </ul>
   </div>
   <div class="opation_box">
       <ul>
           <li>这是未付款的订单。。。</li>
           <li>这是已付款的订单。。。</li>
           <li>这是已发货的订单。。。</li>
           <li>这是未发货的订单。。。</li>
       </ul>
   </div>
</div>

*{
            margin: 0;
            padding: 0;
        }
        .tab{
            margin: 100px auto;
            width: 800px;
        }
        .opation_li{
            height: 40px;
            border-bottom: 1px solid #eee;
        }
        .tab .opation_li li{
            padding: 10px 20px;
            box-sizing: border-box;
            float: left;
            height: 39px;
            border: 1px solid #eee;
            list-style: none;
            background-color: #ccc;
            cursor: pointer;
        }  
        .opation_box li{
            list-style: none;
            width: 800px;
            height: 300px;
            border: 1px solid #eee;
            border-top: none;
            box-sizing: border-box;
            padding: 20px 30px;
            display: none;
        }
        .opation_li li.current{
            background-color: #fff;
            height: 41px;
            border-bottom: none;
        }
        .opation_box li.current{
            display: block;
        }

<script src="./js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".opation_li li").first().addClass("current");
            $(".opation_box li").first().addClass("current");
            $(".opation_li li").click(function(){
                $(this).addClass("current").siblings(".opation_li li").removeClass("current");
                $(".opation_box li").removeClass("current").eq($(this).index()).addClass("current");
            })
        })
    </script>