Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（二）-CFANZ编程社区

Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（二）

上期回顾：Bootstrap 胶囊式标签页nav-pills和iframe的组合运用（一）

所以，我们只需要在tap-content``tap-pane中用上iframe就可以了。

上代码：

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>CSDN_nav_pills</title>

    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">


    <!-- 如果要使用bootstrap.js 一定要确保jquery.js先引入 -->

    <script src="../Bootstrap/js/jquery.js"></script>

    <script src="../Bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <p class="navbar-brand" style="line-height: 60px; padding: 0 0 0 20px;">CSDN_nav-pills</p>
            </div>

        </div>
        <!-- /.container-fluid -->
    </nav>


    <div class="col-xs-3">
        <ul class="nav nav-pills nav-stacked">
            <li class="active"><a href="#a" data-toggle="pill" target="iframeResult1">你叉叉</a></li>
            <li><a href="#b" data-toggle="pill" target="iframeResult4">唱日出</a></li>
            <li><a href="#c" data-toggle="pill" target="iframeResult5">穷哈哈</a></li>
        </ul>
    </div>

    <div id="myTabContent" class="tab-content">

        <div class="tab-pane fade in active" id="a">
            <iframe id="iframeResult1" frameborder="0" name="iframeResult1" scrolling="no" src="../demo/404.html" style="width: 900px; height:800px; "></iframe>
        </div>

        <div class="tab-pane fade" id="b">
            <iframe id="iframeResult4" frameborder="0" name="iframeResult4" scrolling="no" src="../demo/frame_website/frame_LM.html" style="width: 900px; height:800px; "></iframe>
        </div>

        <div class="tab-pane fade" id="c">
            <iframe id="iframeResult5" frameborder="0" name="iframeResult5" scrolling="no" src="../demo/404.html" style="width: 900px; height:800px; "></iframe>
        </div>

    </div>




</body>

</html>

小提示：<li>中的<a>中的链接用到的是锚链接

看效果！
在这里插入图片描述

0 条评论