dropdown和tab结合
陈小晓
2016-08-19 12:37
我想点击下拉菜单，使得之后的div切换不同的文字，可是点击完没效果，不知道哪里出错
（就是跟tab差不多，只是要换成下拉列表的）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes"/>
<title>Bootstrap的HTML标准模板</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<!--你自己的样式文件 -->
<!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<ul class="nav nav-pills" id="myTab">
<li class="dropdown"><a href="#" id="address" class="dropdown-toggle" data-toggle="dropdown" >地址 <b class="caret"></b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="address">
<li ><a href="#TianSha" date-toggle="tab" tabindex="-1">地址1</a></li>
<li ><a href="#DuRuan" date-toggle="tab" tabindex="-1" >地址2</a></li>
<li ><a href="#addressc" date-toggle="tab" tabindex="-1">地址3</a></li>
<li ><a href="#addressd" date-toggle="tab" tabindex="-1">地址4</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="TianSha">
<ul class=" list-group">
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌天沙河（含雅瑶河）流域污染源信息公开（生活污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌天沙河（含雅瑶河）流域污染源信息公开（工业污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌天沙河（含雅瑶河）流域污染源信息公开（农业污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#">更多...</a></li>
</ul>
</div>
<div class="tab-pane" id="DuRuan">
<ul class=" list-group">
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌杜阮河流域污染源信息公开（生活污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌杜阮河流域污染源信息公开（农业污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#" target="_blank">江门市建成区黑臭河涌杜阮河流域污染源信息公开（工业污染源）</a><span>2016-05-18</span></li>
<li class="list-group-item"><a href="#">更多...</a></li>
</ul>
</div>
<div id="addressc" class="tab-pane" >
addressc
</div>
<div id="addressd" class="tab-pane" >
addressd
</div>
</div>
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用 -->
<script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
1回答
-
- Is_a_bella
- 2016-08-19 14:47:29
通过使用<a>标签实现的是地址之间的跳转，你可以看url，是不是地址变了。
想要做出这种效果可以用js的事件来控制面板的隐藏显示。
玩转Bootstrap（基础）
314544 学习 · 2275 问题
相似问题