基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡

需求说明

使用选项卡组件布局这个新闻选项卡的页面
使用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="data: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="data: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="data: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="data: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="data: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元立即加入学习！有需要的朋友戳：

腾讯课堂测试技术学习地址

欢迎转载，但未经作者同意请保留此段声明，并在文章页面明显位置给出原文链接。

基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡相关推荐

基于HTML5的移动Web应用——Bootstrap 样式案例：制作微票儿首页
制作微票儿首页成品效果阶段1:制作微票儿首页响应导航需求说明网页导航在浏览器中居中显示使用bootstrap响应式导航布局微票儿导航,在大于768px的微票儿导航使用媒体查询和bootst ...
基于HTML5的移动Web应用——Bootstrap 样式案例：制作美联英语在线VIP页面微电影
需求说明使用container.row等栅格系统的知识布局响应式的网页,需要适配中等屏幕.小屏幕.超小屏幕使用.img-responsive设置响应式图片,使之适应不同屏幕的终端使用.img-t ...
php项目网页音乐播放器插件,基于HTML5 canvas和Web Audio的音频播放器插件
wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件.通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web A ...
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式
Visual Studio Code开发HTML5安装插件快捷使用Bootstrap样式一.引入bootstrap.css 下载bootstrap,地址:Bootstrap中文网点击Bootstr ...
html在线表单生成,一种基于html5的在线表单设计系统的制作方法
一种基于html5的在线表单设计系统的制作方法 [技术领域] [0001]本发明涉及计算机技术领域,尤其涉及一种基于HTML5的在线表单设计系统. [背景技术] [0002]现有很多表单设计工具大多数 ...
HTML5的web开发,基于Html5技术的WEB开发
摘要:HTML是互联网上应用最广泛的语言,得到了业界大力支持,已经成为WEB发展的标准.它强大了对多媒体的支持力度和远程与本地对数据的处理能力,本文对HTML5的新特性进行了总结,分析了该语言在移动 ...
html5音频插件js,wavesurfer.js是一款基于HTML5 canvas和Web Audio的音频播放器插件
通过wavesurfer.js你可以使用它来制作各种HTML5音频播放器,它可以在各种支持 Web Audio 的浏览器中工作,包括 Firefox, Chrome, Safari, Mobile S ...
基于HTML5+CSS3的Web Scada的应用场景-水厂监控
Web SCADA在水利行业应用场景较多,通过对设备增加物联网关,在网关中实现边缘计算后,将有处理后的数据通过4G信号传输至Web SCADA平台,主要可实现对供排水.加压站.泵房等进行监测及联动控制 ...
基于HTML5的移动Web应用——拖曳
自鼠标被发明以来,拖曳操作在计算机的操作中无处不在.例如,移动文件.图片处理等都需要拖曳.但是如此常见的操作,在Web世界只能通过模拟方式来实现. 在HTML5的规范中,可以通过为元素增加dragga ...

基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡

基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡相关推荐

最新文章

热门文章