jQuery-选项卡面板

效果：

选项卡面板实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jqpanel</title>
    <style>
        *{
     
     
            margin:0;
            padding:0;
        }
        body{
     
     
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .tab_panels{
     
     
            padding: 20px;
        }
        
        .tab_panels ul li{
     
     
            display: inline-block;
            background-color: rgb(177, 175, 175);
            color: white;
            height: 30px;
            text-align: center;
            line-height: 30px;
            width: 70px;
            border-radius: 10px 10px 0 0;
        }
        .tab_panels ul li:hover{
     
     
            background-color: gray;
        }
        .tab_panels ul li.active{
     
     
            background-color: gray;
        }
        .tab_panels .panel{
     
     
            padding: 35px 20px;
            font-size: 18px;
            display: none;
            border-radius: 0 0 10px 10px;
            background-color: rgb(185, 183, 183);
            width: 400px;
            height: 120px;
        }
        .tab_panels .panel.active{
     
     
            display: block;
        }
    </style>
</head>
<body>
    <div class="tab_panels">

        <ul class="tabs">
            <!-- 这里的rel也可以使用data-你自己定义的属性以建立关联 -->
            <li rel='panel1' class="active">panel1</li>
            <li rel='panel2'>panel2</li>
            <li rel='panel3'>panel3</li>
            <li rel='panel4'>panel4</li>
        </ul>

        <div id="panel1" class="panel active">
            content1<br/>
            content1<br/>
            content1<br/>
            content1<br/>
            content1<br/>
        </div>

        <div id="panel2" class="panel">
            content2<br/>
            content2<br/>
            content2<br/>
            content2<br/>
            content2<br/>
        </div>

        <div id="panel3" class="panel">
            content3<br/>
            content3<br/>
            content3<br/>
            content3<br/>
            content3<br/>
        </div>

        <div id="panel4" class="panel">
            content4<br/>
            content4<br/>
            content4<br/>
            content4<br/>
            content4<br/>
        </div>
    </div>
    <script src="/jQuery/js/jquery-3.5.1.js"></script>
    <script>
        $(function(){
     
     
        /********写法一，该写法存在一些不足之处
            * css选择器中 .tab_panels的频繁使用将降低程序的效率，并且造成某些错误（存在多个tab_panels出现问题）
            **使用过多的回调函数，逻辑上判断存在麻烦————回调地狱

            $('.tab_panels .tabs li').on('click',function(){

            // 先将选项卡进行切换
            //移除现有的active类
               $('.tab_panels .tabs li.active').removeClass('active');
            //添加所点击元素的active类；
               $(this).addClass('active');

            // 获取需要显示的panelId通过rel属性
               var panelId = $(this).attr('rel');
            //    alert(panelId);
            //这里使用回调函数，再原来的panel上滑后,调用使点击的panel下滑的函数
                 $('.tab_panels .panel.active').slideUp(300,function(){
                     //在此之前需要把原来的active类移除
                    $(this).removeClass('active');
                     //显示点击的panel，注意这里是Id,需要+“#”号
                    $('#'+panelId).slideDown(300,function(){
                        //在下滑后，需要把现在的元素加上active类
                        $(this).addClass('active');
                    });
                 }) 
            });
            */
        //*****推荐写法
             $('.tab_panels .tabs li').on('click',function(){
     
     
                $panel = $(this).closest('.tab_panels');//这里的$panel 特指jQuery中的变量

            // 先将选项卡进行切换
            //移除现有的active类,添加所点击元素的active类；
               $panel.find('.tabs li.active').removeClass('active');
               $(this).addClass('active');

            // 获取需要显示的panelId通过rel属性
               var panelId = $(this).attr('rel');
            //alert(panelId);
            // 通过函数外置，理清逻辑
                 $panel.find('.panel.active').slideUp(300,showNextPanel);

                 function showNextPanel(){
     
     
                     //在此之前需要把原来的active类移除
                     $(this).removeClass('active');
                     //显示点击的panel，注意这里是Id,需要+“#”号
                    $('#'+panelId).slideDown(300,function(){
     
     
                        //在下滑后，需要把现在的元素加上active类
                        $(this).addClass('active');
                    });
                 }
             });

        });//最外层
      
    </script>
</body>
</html>
效果：

猜你喜欢
