作者：346182773_20da31 | 来源：互联网 | 2023-09-24 10:38
*留意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=">
<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>
<link href="css/bootstrap.min.css" rel="stylesheet">
head>
<body>
<div class="tab-panels">
<ul class="tabs">
<li rel="panel1" class="active">panel1li>
<li rel="panel2">panel2li>
<li rel="panel3">panel3li>
<li rel="panel4">panel4li>
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">panel5li>
<li rel="panel6">panel6li>
<li rel="panel7">panel7li>
<li rel="panel8">panel8li>
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>
<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
京公网安备 11010802041100号