为了账号安全,请及时绑定邮箱和手机立即绑定

dropdown和tab结合

http://img1.sycdn.imooc.com//57b68ee70001d4eb07540215.jpg

我想点击下拉菜单,使得之后的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 回答

通过使用<a>标签实现的是地址之间的跳转,你可以看url,是不是地址变了。

想要做出这种效果可以用js的事件来控制面板的隐藏显示。

0 回复 有任何疑惑可以回复我~
#1

陈小晓 提问者

那个有变,所以是没办法想tab那样直接切换是吗?
2016-08-19 回复 有任何疑惑可以回复我~
#2

Is_a_bella 回复 陈小晓 提问者

嗯,你可以这样 .open{ display:block; } 在js中添加或者删除这个类来达到效果。
2016-08-19 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消

dropdown和tab结合

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信