需求說明
- 使用頁籤元件布局這個新聞頁籤的頁面
- 使用fade和in給頁籤面闆設定切換的過渡動畫
- 使用JavaScript的tab方法來觸發頁籤切換
運作效果
參考代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>搜狐新聞頁籤</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<style>
body{
padding: 30px;
}
.box{
width: 320px;
border: 1px solid #c2c6cb;
padding-top: 4px;
padding-left: 4px;
}
.wrap{
padding: 14px;
}
.myList{
margin-top: 10px;
margin-left: -20px;
font-size: 14px;
line-height: 28px;
}
.myList a{
color: #000033;
}
.myList a:hover{
color: red;
}
</style>
</head>
<body>
<div class="box">
<ul class="nav nav-tabs">
<li class="active"><a href="#name1" >新聞</a></li>
<li><a href="#name2" >娛樂</a></li>
<li><a href="#name3" >軍事</a></li>
<li><a href="#name4" >社會</a></li>
<li><a href="#name5" >體育</a></li>
</ul>
<!--頁籤面闆-->
<div class="tab-content">
<div class="tab-pane fade in active" id="name1"> <!-- fade有淡入淡出的效果-->
<div class="wrap">
<img src="image/1.jpg" alt=""/>
<ul class="myList">
<li><a href="#">1111111111</a></li>
<li><a href="#">1111111111</a></li>
<li><a href="#">1111111111</a></li>
<li><a href="#">1111111111</a></li>
<li><a href="#">1111111111</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade " id="name2">
<div class="wrap">
<img src="image/2.jpg" alt=""/>
<ul class="myList">
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
<li><a href="#">2222222222</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="name3">
<div class="wrap">
<img src="image/3.jpg" alt=""/>
<ul class="myList">
<li><a href="#">333333333</a></li>
<li><a href="#">333333333</a></li>
<li><a href="#">333333333</a></li>
<li><a href="#">333333333</a></li>
<li><a href="#">333333333</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="name4">
<div class="wrap">
<img src="image/4.jpg" alt=""/>
<ul class="myList">
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
<li><a href="#">44444444444</a></li>
</ul>
</div>
</div>
<div class="tab-pane fade" id="name5">
<div class="wrap">
<img src="image/5.jpg" alt=""/>
<ul class="myList">
<li><a href="#">55555555555</a></li>
<li><a href="#">55555555555</a></li>
<li><a href="#">55555555555</a></li>
<li><a href="#">55555555555</a></li>
<li><a href="#">55555555555</a></li>
</ul>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script src='js/bootstrap.min.js'></script>
<script>
$('.nav a').click(function(e){
e.preventDefault();
$(this).tab('show');
})
</script>
</body>
</html>
超全面的測試IT技術課程,0元立即加入學習!有需要的朋友戳:
騰訊課堂測試技術學習位址
歡迎轉載,但未經作者同意請保留此段聲明,并在文章頁面明顯位置給出原文連結。