首页 > dropdown和tab结合?

dropdown和tab结合?

我想点击下拉菜单,使得之后的div切换不同的文字,可是点击完没效果,不知道哪里出错
(就是跟tab差不多,不需要自己写js,只是要换成下拉列表的)

<!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>

在js中,调用下dropdown()方法,其中传入3个参数好像,去官网找下。

【热门文章】
【热门文章】