为了账号安全,请及时绑定邮箱和手机立即绑定

求问大佬点击标题栏后只显示第一个页面Chrome,后面的没反应。。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>媒体对象-媒体对象的嵌套</title>


<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">


    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>


    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style type="text/css">

    body{

    padding-top:50px;

    padding-bottom: 50px;

    }

    .carousel{

    height: 500px;

    background-color: #000;

    margin-bottom: 60px;

    }

    .carousel .item{

    height: 500px;

    background-color: #000;

    }

    .carousel .item img{

    width: 100%;

    }

    .carousel-caption p{

    margin-bottom: 20px;

    font-size: 20px;

    line-height: 1.8;

    }

    #summary-container .col-md-4{

    text-align: center;

    }

    #summary-container .col-md-4 img{

    width: 80%;

    height: 80%;

    }

    hr.divider{

    margin: 40px;

    }

    .feature{

    padding: 30px 0;

    }

    .feature-heading{

    font-size: 50px;

    color:#2a6496;

    margin-top: 120px;

    }

    .feature-heading .text-muted{

    font-size: 28px;

    color: #999;

    }

    </style>

</head>

<body>

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">

<div class="container">

<div class="navbar-header">

<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<a href="#" class="navbar-brand">现代浏览器博物馆</a>

</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

<ul class="nav navbar-nav">

<li class="active"><a href="#">综述</a></li>

<li><a href="#">简述</a></li>

<li class="dropdown">

<a href="#" class="dropdown-toggle" data-toggle="dropdown">特点<span class="caret"></span></a>

<ul class="dropdown-menu" role="menu">

<li><a href="#feature-tab" data-tab="#tab-chrome">Chrome</a></li>

<li><a href="#feature-tab" data-tab="#tab-firefox">Firefox</a></li>

<li><a href="#feature-tab" data-tab="#tab-chrome">Opera</a></li>

<li><a href="#feature-tab" data-tab="#tab-safari">Safari</a></li>

<li><a href="#tab-ie">IE</a></li>

</ul>

</li>

<li><a href="#" data-toggle="modal" data-target="#about">关于</a></li>

</ul>

</div>

</div>

</nav>

<!-- carousel:滚动组件     广告轮播-->

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

<ol class="carousel-indicators"> 

<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

<li data-target="#carousel-example-generic" data-slide-to="1"></li>

<li data-target="#carousel-example-generic" data-slide-to="2"></li>

<li data-target="#carousel-example-generic" data-slide-to="3"></li>

<li data-target="#carousel-example-generic" data-slide-to="4"></li>

</ol>

<div class="carousel-inner" role="listbox">

<div class="item active">

<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/chrome-big.jpg" alt="1 slide">

<div class="container">

<div class="carousel-caption">

<h1>Chorme</h1>

<p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

<p>

<a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点我下载</a>

</p>

</div>

</div>

</div>

<div class="item">

<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/firefox-big.jpg" alt="2 slide">

<div class="container">

<div class="carousel-caption">

<h1>Firefox</h1>

<p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

<p>

<a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" target="_blank" role="button">点我下载</a>

</p>

</div>

</div>

</div>

<div class="item">

<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/safari-big.jpg" alt="3 slide">

<div class="container">

<div class="carousel-caption">

<h1>Safari</h1>

<p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

<p>

<a class="btn btn-lg btn-primary" href="http://www.apple.com/cn/safari/" target="_blank" role="button">点我下载</a>

</p>

</div>

</div>

</div>

<div class="item">

<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/opera-big.jpg" alt="4 slide">

<div class="container">

<div class="carousel-caption">

<h1>Opera</h1>

<p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>

<p>

<a class="btn btn-lg btn-primary" href="http://www.opera.com/zh-cn" target="_blank" role="button">点我下载</a>

</p>

</div>

</div>

</div>

<div class="item">

<img src="C:/Users/22495/Downloads/MOOCbootstrap/images/ie-big.jpg" alt="5 slide">

<div class="container">

<div class="carousel-caption">

<p>IE</p>

<p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>

<p>

<a class="btn btn-lg btn-primary" href="http://ie.microsoft.com/" target="_blank" role="button">点我下载</a>

</p>

</div>

</div>

</div>

</div>

<a href="#carousel-example-generic" class="left carousel-control" role="button" data-slide="prev">

<span class="glyphicon glyphicon-chevron-left"></span>

<span class="sr-only">上一页</span>

</a>

<a href="#carousel-example-generic" class="right carousel-control" role="button" data-slide="next">

<span class="glyphicon glyphicon-chevron-right"></span>

<span class="sr-only">下一页</span>

</a>

</div>

<!-- 主要内容 -->

<div class="container summary">

<!--简介-->

<div class="row" id="summary-container">

<div class="col-md-4">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\chrome-logo.jpg" class="img-circle" alt="chrome">

<h2>Chrome</h2>

<p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>

<p>

<a class="btn btn-default" href="#" role="button">点我下载</a>

</p>

</div>

<div class="col-md-4">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\Firefox-logo.jpg" class="img-circle" alt="firefox">

<h2>Firefox</h2>

<p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>

<p>

<a class="btn btn-default" href="#" role="button">点我下载</a>

</p>

</div>

<div class="col-md-4">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\safari-logo.jpg" class="img-circle" alt="safari">

<h2>Safari</h2>

<p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>

<p>

<a class="btn btn-default" href="#" role="button">点我下载</a>

</p>

</div>

</div>

<!-- 特性 -->

<hr class="feature-divider">

<!--标签页-->

<ul class="nav nav-tabs" role="tablist" id="feature-tab">

<li class="active"><a href="#tab-chrome" role="tab" data-toggle="tab">Chrome</a></li>

<li><a href="#tab-firefox" role="tab" data-toggle="tab">Firefox</a></li>

<li><a href="#tab-safari" role="tab" data-toggle="tab">Safari</a></li>

<li><a href="#tab-opera" role="tab" data-toggle="tab">Opera</a></li>

<li><a href="#tab-ie" role="tab" data-toggle="tab">IE</a></li>

</ul>


<div class="tab-content">

<div class="tab-pane active" id="tab-chrome">

<div class="row feature">

<div class="col-md-7">

<h2 class="feature-heading">

"Google Chrome"<span class="text-muted">使用最广的浏览器</span>

</h2>

<p class="lead">

Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。

                        该浏览器是基于其他开源软件所撰写,包括WebKit,目标是提升稳定性、速度和安全性,并创造出简单且有效率的使用者界面。

</p>

</div>

<div class="col-md-5">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\chrome-logo.jpg" class="feature-image img-responsive" alt="Chrome">

</div>

</div>

</div>

<div class="tab-pane" id="tab-firefox">

<div class="row feature">

<div class="col-md-7">

<h2 class="feature-heading">

"Mozilla Firefox"<span class="text-muted">美丽的狐狸</span>

</h2>

<p class="lead">

Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器,

                        使用Gecko引擎(非ie内核),支持多种操作系统如Windows、Mac和linux。

</p>

</div>

<div class="col-md-5">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\firefox-logo.jpg" class="feature-image img-responsive" alt="Firefox">

</div>

</div>

</div>

<div class="tab-pane" id="tab-safari">

<div class="row feature">

<div class="col-md-7">

<h2 class="feature-heading">

"Safari"<span class="text-muted">Mac用户首选</span>

</h2>

<p class="lead">

Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器,使用了KDE的KHTML作为浏览器的运算核心。

                        Safari在2003年1月7日首度发行测试版,并成为Mac OS X v10.3与之后的默认浏览器,也是iPhone与IPAD和iPod touch的指定浏览器。

</p>

</div>

<div class="col-md-5">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\safari-logo.jpg" class="feature-image img-responsive" alt="Safari">

</div>

</div>

</div>

<div class="tab-pane" id="tab-opera">

<div class="row feature">

<div class="col-md-7">

<h2 class="feature-heading">

"Opera"<span class="text-muted">小众但易用</span>

</h2>

<p class="lead">

Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。

                        是跨平台浏览器可以在Windows、Mac和Linux三个操作系统平台上运行。.

</p>

</div>

<div class="col-md-5">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\opera-logo.jpg" class="feature-image img-responsive" alt="Opera">

</div>

</div>

</div>

<div class="tab-pane" id="tab-ie">

<div class="row feature">

<div class="col-md-7">

<h2 class="feature-heading">

"IE"<span class="text-muted">你懂得</span>

</h2>

<p class="lead">

Internet Explorer,原称Microsoft Internet Explorer(6版本以前)和Windows Internet

                        Explorer(7,8,9,10版本),

                        简称IE,是美国微软公司推出的一款网页浏览器。它采用的排版引擎(俗称内核)为Trident。

</p>

</div>

<div class="col-md-5">

<img src="C:\Users\22495\Downloads\MOOCbootstrap\images\ie-logo.jpg" class="feature-image img-responsive" alt="IE">

</div>

</div>

</div>

</div>

<hr class="divider">

<footer>

<p class="pull-right">

<a href="#top">回到顶部</a>

</p>

<p>@ 2018</p>

</footer>

</div>

<!-- 弹出框 -->

<div class="modal fade" id="about">

<div class="modal-dialog">

<div class="modal-content">

<div class="modal-header">

<button type="button" class="close" data-dismiss="modal">

<span aria-hidden="true">&times;<span class="sr-only">关闭</span></span>

</button>

<h4 class="modal-title">关于</h4>

</div>

<div class="modal-body">

<p>慕课网隶属于北京慕课科技中心(有限合伙),是一家从事互联网免费教学的网络教育公司。秉承“开拓、创新、公平、分享”的精神,

                        将互联网特性全面的应用在教育领域,致力于为教育机构及求学者打造一站式互动在线教育品牌。</p>

</div>

<div class="modal-footer">

<button type="button" class="btn btn-default" data-dismiss="modal">了解</button>

</div>

</div>

</div>

</div>


<script type="text/javascript">

$(document).ready(function(){

$("#bs-example-navbar-collapse-1 .dropdown-menu a").click(function(e){

var href = $(this).attr("href");

$("#tab-list a[href='" + href + "']").tab("show");

e.preventDefault();

    $(document).scrollTop($(href).offset().top - 120);

});

});

</script>

</body>

</html>


正在回答

1 回答

已解决,标签页id错误

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

求问大佬点击标题栏后只显示第一个页面Chrome,后面的没反应。。

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信