JS动态加载实现2019-12-03
2019-12-03 本文已影响0人
机器人会画画
从这里下载jquery.js放到/bower_compents/jquery/jquery.js
https://way2tutorial.com/jquery/jquery_download.php#jquery_download,最新版
#!+tab新建一个html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.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>
</head>
<body>
<script src="bower_compents/jquery/jquery.js"></script>
<script>
$(function(){
$('.tab-panels .tabs li').on('click',function(){
var $panel =$(this).closest('.tab-panels');
// $('.tab-panels .tabs li.active').removeClass('active');
$panel.find('.tabs li.active').removeClass('active');
$(this).addClass('active');
//figure out which panel to show
var panelToshow = $(this).attr('rel');
//hide current panel
$panel.find('.panel.active').slideUp(300,showNextPanel);
// $('.tab-panels .panel.active').slideUp(300,function(){
//show next panel
function showNextPanel(){
$(this).removeClass('active');
$('#'+panelToshow).slideDown(300,function(){
$(this).addClass('active');
});
}
});
});
</script>
<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>
</div>
<div id="panel2" class="panel">
content2<br>
content2<br>
content2<br>
content2<br>
</div>
<div id="panel3" class="panel">
content3<br>
content3<br>
content3<br>
content3<br>
</div>
<div id="panel4" class="panel">
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>
</div>
<div id="panel6" class="panel">
content6<br>
content6<br>
content6<br>
content6<br>
</div>
<div id="panel7" class="panel">
content7<br>
content7<br>
content7<br>
content7<br>
</div>
<div id="panel8" class="panel">
content8<br>
content8<br>
content8<br>
content8<br>
</div>
</div>
</body>
</html>
结果图
