需求说明
使用选项卡组件布局这个新闻选项卡的页面使用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元立即加入学习！有需要的朋友戳：
腾讯课堂测试技术学习地址
欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。
