请问哪里写错了.点了连接tab不自动展开
scorpion_0001
2015-12-30 18:16
<!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" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!-- 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="#">现代浏览器博物馆</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">关于</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>现代浏览器博物馆</h2>
<h6>现代浏览器博现代浏览器博物馆物馆</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>现代浏览器博物馆</h2>
<h6>现代浏览器博物馆现代浏览器博物馆</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>现代浏览器博物馆</h2>
<h6>现代浏览器博物馆现代浏览器博物馆</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）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发</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）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发</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）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发</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）表示其在事件开始时被触发；而过去式动词（例如 shown ）表示在动作执行完毕之后被触发</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>
1回答
-
- 李晓健
- 2015-12-30 21:06:57
$(document).ready(function() { $("#deme1 .dropdown-menu a").click(function(){ var href = $(this).attr("href"); $("#liebiao a['" + href + "']").tab("show"); }); });不知道你想要的是什么效果，你这个样式在我这看的也是乱的，有一个问题就是 $("#deme1 .dropdown-menu a")这里 你id＝demo1 的标签下根本就没有className=dropdown-menu 的标签。所以这里根本就选择不到任何元素。
基于bootstrap的网页开发
187669 学习 · 734 问题
相似问题