1.步骤
(1)要做为下拉菜单的li增加class="dropdown"
(2)为li中文字添加超链接<a data-toggle="dropdown" class="dropdown-toggle" href="#">书籍<b class="caret"></b></a>
(3)li>ul添加<ul class="dropdown-menu">
(4)li>ul>li添加：<li><a data-toggle="tab" href="#java">Java核心技术</a></li>或<li><a data-toggle="tab" data-target="#java">Java核心技术</a></li>
(5)各子菜单对就的div添加：<div id="java" class="tab-pane fade"><p>Java核心技术：50元</p></div>
2.代码
<!DOCTYPE html> <html> <head> <title>dropdown</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 新 Bootstrap 核心 CSS 文件 --> <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"> <!-- 可选的Bootstrap主题文件（一般不使用） --> <!-- <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css"></script>--> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 --> <!-- 注意： 如果通过 file:// 引入 Respond.js 文件，则该文件无法起效果 --> <!--[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.3.0/respond.min.js"></script> <![endif]--> </head> <body> <ul class="nav nav-tabs" id="my_tab"> <li class="active"><a data-toggle="tab" href="#home">首页</a></li> <li class=""><a data-toggle="tab" href="#movie">电影</a></li> <li class="dropdown"> <a data-toggle="dropdown" class="dropdown-toggle" href="#">书籍<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a data-toggle="tab" href="#java">Java核心技术</a></li> <li><a data-toggle="tab" href="#bootstrap">Bootstrap用户手册</a></li> <li><a data-toggle="tab" data-target="#jquery">锋利的jQuery</a></li> </ul> </li> </ul> <div class="tab-content" id="my_tab_content"> <div id="home" class="tab-pane fade active in"><p>这是首页这是首页这是首页这是首页这是首页这是首页这是首页</p></div> <div id="movie" class="tab-pane fade"><p>这是电影：《速度与激情7》《煎饼侠》</p></div> <div id="java" class="tab-pane fade"><p>Java核心技术：50元</p></div> <div id="bootstrap" class="tab-pane fade"><p>Bootstrap用户手册：39元</p></div> <div id="jquery" class="tab-pane fade"><p>锋利的jQuery：45元</p></div> </div> </body> </html>
3.运行结果
时间： 2024-11-13 06:43:56