需求說明
- 使用選項卡組件佈局這個新聞選項卡的頁面
- 使用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元立即加入學習！有需要的朋友戳：
騰訊課堂測試技術學習地址
歡迎轉載，但未經作者同意請保留此段聲明，並在文章頁面明顯位置給出原文鏈接。