請問哪里寫錯了.點了連接tab不自動展開
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" >
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
? ? ? ? <script src="http://cdn.bootcss.com/html5shiv/3.7.0/html5shiv.min.js"></script>
? ? ? ? <script src="http://cdn.bootcss.com/respond.js/1.3.0/respond.min.js"></script>
? ? <![endif]-->
<style>
body {
padding-top: 50px;
}
.carousel {
height: 500px;
background: #000;
}
.carousel .item {
height: 500px;
background: #000;
}
.carousel img {
width: 100%;
}
.carousel .carousel-caption p {
line-height: 1.8;
margin-bottom: 20px;
font-size: 17px;
}
.container {
margin-top: 50px;
}
#sa .col-md-4 {
text-align: center;
}
#sa .col-md-4 a {
width: 200px;
display: block;
margin: 0 auto;
}
.dv {
margin: 40px 0px;
}
.tab-content h1 {
color: #007BFD;
}
.tab-content span {
color: #787878;
font-size: 20px;
}
.tab-content .col-md-7 {
margin-top: 30px;
}
.tab-content .col-md-5 {
margin-top: 30px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" id="sa1" role="navigation">?
? <!-- Brand and toggle get grouped for better mobile display -->
? <div>
? ? <button type="button" data-toggle="collapse" data-target="#deme1"> <span>Toggle navigation</span> <span></span> <span></span> <span></span> </button>
? ? <a href="#">現(xiàn)代瀏覽器博物館</a> </div>
??
? <!-- Collect the nav links, forms, and other content for toggling -->
? <div class="collapse navbar-collapse" id="deme1">
? ? <ul class="nav navbar-nav">
? ? ? <li><a href="#">綜述</a></li>
? ? ? <li><a href="#">簡述1</a></li>
? ? ? <li class=" dropdown"> <a href="#" data-toggle="dropdown">特點<b></b></a>
? ? ? ? <ul id="xiala1">
? ? ? ? ? <li><a href="#home">Home</a></li>
? ? ? ? ? <li></li>
? ? ? ? ? <li><a href="#profile">Profile</a></li>
? ? ? ? ? <li></li>
? ? ? ? ? <li><a href="#messages">Messages</a></li>
? ? ? ? ? <li></li>
? ? ? ? ? <li><a href="#settings">Settings</a></li>
? ? ? ? </ul>
? ? ? </li>
? ? ? <li><a href="#" data-toggle="modal" data-target="#yu">關(guān)于</a></li>
? ? </ul>
? </div>
? <!-- /.navbar-collapse -->?
</nav>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">?
? <!-- Indicators -->
? <ol>
? ? <li data-target="#carousel-example-generic" data-slide-to="0"></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>
??
? <!-- Wrapper for slides -->
? <div role="listbox">
? ? <div class="item active"> <img src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg" alt="1 slide">
? ? ? <div>
? ? ? ? <h1>頁面測試</h1>
? ? ? ? <p>頁面測試頁面測試頁面測試頁面測試頁面測試頁面測試</p>
? ? ? ? <button type="button" class="btn btn-success">(成功)Success</button>
? ? ? ? <p></p>
? ? ? </div>
? ? </div>
? ? <div> <img src="http://imgsrc.baidu.com/forum/pic/item/3ac79f3df8dcd1004e9102b8728b4710b9122f1e.jpg" alt="2 slide">
? ? ? <div>
? ? ? ? <h1>頁面測試</h1>
? ? ? ? <p>頁面測試頁面測試頁面測試頁面測試頁面測試頁面測試</p>
? ? ? ? <button type="button" class="btn btn-success">(成功)Success</button>
? ? ? ? <p></p>
? ? ? </div>
? ? </div>
? ? <div> <img src="http://imgsrc.baidu.com/forum/pic/item/3ac79f3df8dcd1004e9102b8728b4710b9122f1e.jpg" alt="3 slide">
? ? ? <div>
? ? ? ? <h1>頁面測試</h1>
? ? ? ? <p>頁面測試頁面測試頁面測試頁面測試頁面測試頁面測試</p>
? ? ? ? <button type="button" class="btn btn-success">(成功)Success</button>
? ? ? ? <p></p>
? ? ? </div>
? ? </div>
? ? <div> <img src="http://imgsrc.baidu.com/forum/pic/item/3ac79f3df8dcd1004e9102b8728b4710b9122f1e.jpg" alt="4 slide">
? ? ? <div>
? ? ? ? <h1>頁面測試</h1>
? ? ? ? <p>頁面測試頁面測試頁面測試頁面測試頁面測試頁面測試</p>
? ? ? ? <button type="button" class="btn btn-success">(成功)Success</button>
? ? ? ? <p></p>
? ? ? </div>
? ? </div>
? ? <div> <img src="http://imgsrc.baidu.com/forum/pic/item/3ac79f3df8dcd1004e9102b8728b4710b9122f1e.jpg" alt="5 slide">
? ? ? <div>
? ? ? ? <h1>頁面測試</h1>
? ? ? ? <p>頁面測試頁面測試頁面測試頁面測試頁面測試頁面測試</p>
? ? ? ? <button type="button" class="btn btn-success">(成功)Success</button>
? ? ? ? <p></p>
? ? ? </div>
? ? </div>
? </div>
??
? <!-- Controls -->?
? <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> <span>上一頁</span> </a> <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span>下一頁</span> </a> </div>
<div id="sa">
? <div>
? ? <div><img src="http://img1.3lian.com/img2011/w1/104/25/131.jpg">
? ? ? <h2>現(xiàn)代瀏覽器博物館</h2>
? ? ? <h6>現(xiàn)代瀏覽器博現(xiàn)代瀏覽器博物館物館</h6>
? ? ? <p><a class="btn btn-default" href="#" role="button">下載</a></p>
? ? </div>
? ? <div><img src="http://img1.3lian.com/img2011/w1/104/25/131.jpg">
? ? ? <h2>現(xiàn)代瀏覽器博物館</h2>
? ? ? <h6>現(xiàn)代瀏覽器博物館現(xiàn)代瀏覽器博物館</h6>
? ? ? <p><a class="btn btn-default" href="#" role="button">下載</a></p>
? ? </div>
? ? <div><img src="http://img1.3lian.com/img2011/w1/104/25/131.jpg">
? ? ? <h2>現(xiàn)代瀏覽器博物館</h2>
? ? ? <h6>現(xiàn)代瀏覽器博物館現(xiàn)代瀏覽器博物館</h6>
? ? ? <p><a class="btn btn-default" href="#" role="button">下載</a></p>
? ? </div>
? </div>
? <hr>
</div>
<div>?
??
? <!-- Nav tabs -->
? <ul class="nav nav-tabs" role="tablist" id="liebiao">
? ? <li role="presentation">
? ? <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
? ? <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
? ? <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
? ? <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
? </ul>
??
? <!-- Tab panes -->
? <div>
? ? <div role="tabpanel" class="tab-pane active" id="home">
? ? ? <div>
? ? ? ? <div>
? ? ? ? ? <h1>測11試測<span>使用最廣的瀏覽器</span></h1>
? ? ? ? ? <p>Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說,這些事件都有不定式和過去式兩種動詞的命名形式,例如,不定式形式的動詞(例如 show)表示其在事件開始時被觸發(fā);而過去式動詞(例如 shown )表示在動作執(zhí)行完畢之后被觸發(fā)</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? <p><img src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg"></p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <div role="tabpanel" id="profile">
? ? ? <div>
? ? ? ? <div>
? ? ? ? ? <h1>測22試測<span>使用最廣的瀏覽器</span></h1>
? ? ? ? ? <p>Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說,這些事件都有不定式和過去式兩種動詞的命名形式,例如,不定式形式的動詞(例如 show)表示其在事件開始時被觸發(fā);而過去式動詞(例如 shown )表示在動作執(zhí)行完畢之后被觸發(fā)</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? <p><img src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg"></p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <div role="tabpanel" id="messages">
? ? ? <div>
? ? ? ? <div>
? ? ? ? ? <h1>測33試測<span>使用最廣的瀏覽器</span></h1>
? ? ? ? ? <p>Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說,這些事件都有不定式和過去式兩種動詞的命名形式,例如,不定式形式的動詞(例如 show)表示其在事件開始時被觸發(fā);而過去式動詞(例如 shown )表示在動作執(zhí)行完畢之后被觸發(fā)</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? <p><img src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg"></p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? ? <div role="tabpanel" id="settings">
? ? ? <div>
? ? ? ? <div>
? ? ? ? ? <h1>測44試測<span>使用最廣的瀏覽器</span></h1>
? ? ? ? ? <p>Bootstrap 為大部分插件所具有的動作提供了自定義事件。一般來說,這些事件都有不定式和過去式兩種動詞的命名形式,例如,不定式形式的動詞(例如 show)表示其在事件開始時被觸發(fā);而過去式動詞(例如 shown )表示在動作執(zhí)行完畢之后被觸發(fā)</p>
? ? ? ? </div>
? ? ? ? <div>
? ? ? ? ? <p><img src="http://baike.soso.com/p/20090711/20090711101754-314944703.jpg"></p>
? ? ? ? </div>
? ? ? </div>
? ? </div>
? </div>
</div>
<div class="modal fade" id="yu">
? <div>
? ? <div>
? ? ? <div>
? ? ? ? <button type="button" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
? ? ? ? <h4>標題</h4>
? ? ? </div>
? ? ? <div>
? ? ? ? <p>One fine body…</p>
? ? ? </div>
? ? ? <div>
? ? ? ? <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
? ? ? ? <button type="button" class="btn btn-danger" data-dismiss="modal">(危險)Danger</button>
? ? ? </div>
? ? </div>
? ? <!-- /.modal-content -->?
? </div>
? <!-- /.modal-dialog -->?
</div>
<!-- /.modal -->?
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->?
<script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>?
<!-- Include all compiled plugins (below), or include individual files as needed -->?
<script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>?
<script>
$(document).ready(function() {
$("#deme1 .dropdown-menu a").click(function(){
var href = $(this).attr("href");
$("#liebiao a['" + href + "']").tab("show");
});
? ??
});
</script>
</body>
</html>
2015-12-30
不知道你想要的是什么效果,你這個樣式在我這看的也是亂的,有一個問題就是?$("#deme1 .dropdown-menu a")這里 ? 你id=demo1 的標簽下根本就沒有className=dropdown-menu 的標簽。所以這里根本就選擇不到任何元素。