Jquery 面板导航，切换效果

田田 • • web开发技术 • 237 阅读

*留意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 面板导航，切换效果

原文：https://www.cnblogs.com/hechunfeng/p/15259342.html

以上是Jquery 面板导航，切换效果的全部内容。
THE END
分享
二维码
)">
< <上一篇
)">
下一篇>>