*留意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