Jquery 面板导航，切换效果

2022-04-05 21:30:30
*留意css的默认显示和面板隐藏
*留意active
*html中的rel的导航属性
<!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">
    <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags -->
    <title></title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <style type="text/css">
    body {
        background: #fafafa;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        color: #333;
    }
    
    
    .tab-panels ul {
        margin: 0;
        padding: 0;
    }
    .tab-panels ul li {
        list-style-type: none;
        display: inline-block;
        background: #999;
        margin: 0;
        padding: 3px 10px;
        border-radius: 10px 10px 0 0;
        color: #fff;
        font-weight: 200;
        cursor: pointer;
    
    }
    .tab-panels ul li:hover {
        color: #fff;
        background: #666;
    }
    
    .tab-panels ul li.active {
        color: #fff;
        background: #666;
    }
    
    .tab-panels .panel {
        display:none;
        background: #c9c9c9;
        padding: 30px;
        border-radius: 0 0 10px 10px;
    }
    
    .tab-panels .panel.active {
        display:block;
    }


  </style>

    <!-- Bootstrap -->
   <link href="css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <div class="tab-panels">
                <ul class="tabs">
                    <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>
    
    
      <div class="tab-panels">
                <ul class="tabs">
                    <li rel="panel5" class="active">panel5</li>
                    <li rel="panel6">panel6</li>
                    <li rel="panel7">panel7</li>
                    <li rel="panel8">panel8</li>
                </ul>
    
                <div id="panel5" class="panel active">
                    content5<br/>
                    content5<br/>
                    content5<br/>
                    content5<br/>
                    content5<br/>
                </div>
                <div id="panel6" class="panel">
                    content6<br/>
                    content6<br/>
                    content6<br/>
                    content6<br/>
                    content6<br/>
                </div>
                <div id="panel7" class="panel">
                    content7<br/>
                    content7<br/>
                    content7<br/>
                    content7<br/>
                    content7<br/>
                </div>
                <div id="panel8" class="panel">
                    content8<br/>
                    content8<br/>
                    content8<br/>
                    content8<br/>
                    content8<br/>
                </div>
            </div>
    
    

    <!-- jQuery (necessary for Bootstrap‘s JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript">
    
    
    
        // 文档加载函数
        $(function(){
            $(‘.tab-panels .tabs li‘).on(‘click‘,function(){
                var $panel = $(this).closest(‘.tab-panels‘);
                $panel.find(‘.tabs li.active‘).removeClass(‘active‘);
                $(this).addClass(‘active‘);
                
             var panelToShow=$(this).attr(‘rel‘);
             // alert(panelToShow);  //测试用的
             $panel.find(‘.panel.active‘).slideUp(100,showNextPanel);
             //100是100毫秒,设置为0就是直接切换效果了
             
             
             //避免回调地狱
             function showNextPanel(){
                              $(this).removeClass(‘active‘);
                              
                              $(‘#‘+panelToShow).slideDown(100,function(){
                                  $(this).addClass(‘active‘);
                              });
                        }
             
            });
        });
    
</script>
    

  
  </body>
</html>
完整代码：https://codepen.io/anon/pen/mJyQez
Jquery 面板导航，切换效果
码农公寓

相关文章
