Bootstrap使用Tab和dropdown实现导航下拉菜单效果

最新推荐文章于 2023-03-11 09:28:02 发布

靳小霞

最新推荐文章于 2023-03-11 09:28:02 发布

阅读量3.4k

点赞数

分类专栏： BootStrap 文章标签： bootstrap 导航

本文链接：https://blog.csdn.net/u012493556/article/details/52174223

版权

BootStrap 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
    <title>Dropdown</title>
     <!--引用相应的CSS和JQ插件-->
     <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap-theme.css" rel="stylesheet" type="text/css">
     <link href="dist/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css">
     <script type="text/javascript" src="js/tests/vendor/jquery.min.js"></script>
     <script type="text/javascript" src="dist/bootstrap.js"></script>
     <script type="text/javascript" src="dist/bootstrap.min.js"></script>
     <script type="text/javascript" src="dist/npm.js"></script>
     <script type="text/javascript" src="js/tab.js"></script>
     <script type="text/javascript" src="js/dropdown.js"></script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab">
    <li><a href="#home" data-toggle="tab">首页</a></li>
    <li><a href="#about" data-toggle="tab">关于</a></li>
    <li><a href="#contact" data-toggle="tab">联系</a></li>
    <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="#addressa" date-toggle="tab" tabindex="-1">地址1</a></li>
              <li ><a href="#addressb" 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">
<!--默认选择home active-->
<div  class="tab-pane active" id="home">
home
</div>
<div id="about" class="tab-pane">
about
</div>
<div id="contact" class="tab-pane">
contact
</div>

<div id="addressa" class="tab-pane">
addressa
</div>

<div id="addressb" class="tab-pane">
addressb
</div>

<div id="addressc" class="tab-pane" >
addressc
</div>

<div id="addressd" class="tab-pane" >
addressd
</div>
</div>

</body>
<script type="text/javascript">
     /*下拉菜单切换*/
    $('.dropdown-toggle').dropdown();
      /*启用选项卡*/
    $("#myTab a").click(function(e){
       e.preventDefault();/*不要执行与事件有关的默认动作*/
      $(this).tab('show');

    });

</script>

</html>

靳小霞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap使用Tab和dropdown实现导航下拉菜单效果

<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Dropdown</title>  <link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css"> <link href=
复制链接

扫一扫