當頁面內(nèi)容多，產(chǎn)生縱向滾動時，單擊菜單中的對應(yīng)項，切到tab后，顯示位置不對
<!DOCTYPE html>
<html lang="zh-CN">
<head>
? ?<meta charset="utf-8">
? ?<meta http-equiv="X-UA-Compatible" content="IE=edge">
? ?<meta name="viewport" content="width=device-width, initial-scale=1">
? ?<title>Bootstrap 101 Template</title>
? ?<link href="bootstrap-3.3.5/css/bootstrap.css" rel="stylesheet">
? ?<script src="bootstrap-3.3.5/js/html5shiv.min.js"></script>
? ?<script src="bootstrap-3.3.5/js/respond.min.js"></script>
? ?<link href="resource/css/main.css" rel="stylesheet">
</head>
<body>
<!--導航條-->
<div class="navbar navbar-default navbar-fixed-top navbar-inverse">
? ?<div class="container">
? ? ? ?<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse">
? ? ? ? ? ?<ul class="nav navbar-nav">
? ? ? ? ? ? ? ?<li class="dropdown">
? ? ? ? ? ? ? ? ? ?<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">項目案例<span class="caret"></span></a>
? ? ? ? ? ? ? ? ? ?<ul class="dropdown-menu" role="menu" id="demo-navbar">
? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#tab-1">50年代</a></li>
? ? ? ? ? ? ? ? ? ? ? ?<li role="separator" class="divider"></li>
? ? ? ? ? ? ? ? ? ? ? ?<li><a href="#tab-2">博客</a></li>
? ? ? ? ? ? ? ? ? ?</ul>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ?</ul>
? ? ? ?</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</div>
<div class="container">
? ?<!--選項卡-->
<div>
? ? ? ?<ul class="nav nav-tabs" id="tab-list">
? ? ? ? ? ?<li class="active">
? ? ? ? ? ? ? ?<a href="#tab-1" role="tab" data-toggle="tab">標簽1</a>
? ? ? ? ? ?</li>
? ? ? ? ? ?<li>
? ? ? ? ? ? ? ?<a href="#tab-2" role="tab" data-toggle="tab">標簽2</a>
? ? ? ? ? ?</li>
? ? ? ?</ul>
? ?</div>
? ?<!--選項卡內(nèi)容-->
<div class="tab-content" style="margin-bottom: 40px;">
? ? ? ?<div class="tab-pane active" id="tab-1">
? ? ? ? ? ?<div class="row feature">
? ? ? ? ? ? ? ?<div class="col-md-5">
? ? ? ? ? ? ? ? ? ?<img src="resource/images/wow3.jpg" alt="First slide">
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ? ? ?<div class="tab-pane" id="tab-2">
? ? ? ? ? ?<div class="row">
? ? ? ? ? ? ? ?<div class="col-md-5">
? ? ? ? ? ? ? ? ? ?<img src="resource/images/wow4.jpg" alt="First slide">
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
<hr>
? ? ? ?<!--警告框-->
<div class="alert alert-success" role="alert">普通警告框：class="alert alert-success" role="alert"</div>
? ? ? ?<div class="alert alert-info" role="alert">alert alert-info</div>
? ? ? ?<div class="alert alert-warning" role="alert">alert alert-warning</div>
? ? ? ?<div class="alert alert-danger" role="alert">alert alert-danger</div>
? ? ? ?<!--可關(guān)閉的警告框
? ? ? ?為警告框添加一個可選的 .alert-dismissible 類和一個關(guān)閉按鈕。
? ? ? ?依賴警告框 JavaScript 插件
? ? ? ?如果需要為警告框組件提供關(guān)閉功能，請使用 jQuery 警告框插件。-->
<div class="alert alert-warning alert-dismissible" role="alert">
? ? ? ? ? ?<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span
aria-hidden="true">×</span></button>
? ? ? ? ? ?<strong>Warning! & 警告框中的鏈接</strong> 依賴警告框 JavaScript 插件，如果需要為警告框組件提供關(guān)閉功能，請使用 <a href="#" class="alert-link">jQuery</a>
? ? ? ? ? ?警告框插件。
? ? ? ?</div>
? ? ? ?<!--分頁-->
<div style="text-align: center">
? ? ? ? ? ?<ul class="pagination" style="text-align: center"><!--pagination-lg-->
<li class="disabled">
? ? ? ? ? ? ? ? ? ?<a href="#" aria-label="Previous"><span aria-hidden="true">«</span></a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ? ? ?<li class="active"><a href="#">1</a></li>
? ? ? ? ? ? ? ?<li><a href="#">2</a></li>
? ? ? ? ? ? ? ?<li><a href="#">3</a></li>
? ? ? ? ? ? ? ?<li><a href="#">4</a></li>
? ? ? ? ? ? ? ?<li><a href="#">5</a></li>
? ? ? ? ? ? ? ?<li class="disabled">
? ? ? ? ? ? ? ? ? ?<a href="#" aria-label="Next"><span aria-hidden="true">»</span></a>
? ? ? ? ? ? ? ?</li>
? ? ? ? ? ?</ul>
? ? ? ?</div>
? ? ? ?<!--折疊-->
<div class="panel-group" id="accordion">
? ? ? ? ? ?<div class="panel panel-default">
? ? ? ? ? ? ? ?<div class="panel-heading">
? ? ? ? ? ? ? ? ? ?<h4 class="panel-title">
? ? ? ? ? ? ? ? ? ? ? ?<a data-toggle="collapse" data-parent="#accordion"
href="#collapseOne">
? ? ? ? ? ? ? ? ? ? ? ? ? ?點擊我進行展開，再次點擊我進行折疊。第 1 部分
? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?</h4>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div id="collapseOne" class="panel-collapse collapse in">
? ? ? ? ? ? ? ? ? ?<div class="panel-body">
? ? ? ? ? ? ? ? ? ? ? ?Nihil anim keffiyeh helvetica, craft beer labore wes anderson
? ? ? ? ? ? ? ? ? ? ? ?cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
? ? ? ? ? ? ? ? ? ? ? ?vice lomo.
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="panel panel-default">
? ? ? ? ? ? ? ?<div class="panel-heading">
? ? ? ? ? ? ? ? ? ?<h4 class="panel-title">
? ? ? ? ? ? ? ? ? ? ? ?<a data-toggle="collapse" data-parent="#accordion"
href="#collapseTwo">
? ? ? ? ? ? ? ? ? ? ? ? ? ?點擊我進行展開，再次點擊我進行折疊。第 2 部分
? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?</h4>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div id="collapseTwo" class="panel-collapse collapse">
? ? ? ? ? ? ? ? ? ?<div class="panel-body">
? ? ? ? ? ? ? ? ? ? ? ?Nihil anim keffiyeh helvetica, craft beer labore wes anderson
? ? ? ? ? ? ? ? ? ? ? ?cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
? ? ? ? ? ? ? ? ? ? ? ?vice lomo.
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ? ? ?<div class="panel panel-default">
? ? ? ? ? ? ? ?<div class="panel-heading">
? ? ? ? ? ? ? ? ? ?<h4 class="panel-title">
? ? ? ? ? ? ? ? ? ? ? ?<a data-toggle="collapse" data-parent="#accordion"
href="#collapseThree">
? ? ? ? ? ? ? ? ? ? ? ? ? ?點擊我進行展開，再次點擊我進行折疊。第 3 部分
? ? ? ? ? ? ? ? ? ? ? ?</a>
? ? ? ? ? ? ? ? ? ?</h4>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?<div id="collapseThree" class="panel-collapse collapse">
? ? ? ? ? ? ? ? ? ?<div class="panel-body">
? ? ? ? ? ? ? ? ? ? ? ?Nihil anim keffiyeh helvetica, craft beer labore wes anderson
? ? ? ? ? ? ? ? ? ? ? ?cred nesciunt sapiente ea proident. Ad vegan excepteur butcher
? ? ? ? ? ? ? ? ? ? ? ?vice lomo.
? ? ? ? ? ? ? ? ? ?</div>
? ? ? ? ? ? ? ?</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ?</div>
</body>
</html>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="bootstrap-3.3.5/js/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script>
? ?$("document").ready(function () {
? ? ? ?$("#demo-navbar li a").click(function () {
? ? ? ? ? ?var href = $(this).attr("href");
? ? ? ? ? ?$("#tab-list a[href='" + href + "']").tab("show");
? ? ? ?});
? ?});
</script>
2016-04-23
把你的代碼放到我的工程里是沒問題的，你的電腦屏幕多大