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

最新推荐文章于 2024-01-26 17:48:54 发布

sem00000

最新推荐文章于 2024-01-26 17:48:54 发布

阅读量3.1k

点赞数 2

分类专栏：移动WEB开发前端文章标签： html bootstrap html5

本文链接：https://blog.csdn.net/sem00000/article/details/106094850

版权

前端同时被 2 个专栏收录

16 篇文章 5 订阅

订阅专栏

移动WEB开发

14 篇文章 0 订阅

订阅专栏

需求说明

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

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

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

sem00000

关注

2
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
基于HTML5的移动Web应用——Bootstrap 样式案例：制作搜狐新闻选项卡

需求说明使用选项卡组件布局这个新闻选项卡的页面使用fade和in给选项卡面板设置切换的过渡动画使用JavaScript的tab方法来触发选项卡切换运行效果参考代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>搜狐新闻选项卡</title> <meta name="viewport"
复制链接

扫一扫