<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 处理低版本IE 4.0不考虑IE8 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端视口的设置 --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 引入bootstrap.css --> <link rel="stylesheet" href="css/bootstrap.css"> <script src="js/jquery-1.11.3.min.js"></script> <script src="js/bootstrap.js"></script> <style> #login{ width:400px; } </style> </head> <body> <div class="container"> <ul class="nav nav-tabs"> <li class="active"><a href="#a" data-toggle="tab">one</a></li> <li><a href="#b" data-toggle="tab">two</a></li> <li><a href="#c" data-toggle="tab">three</a></li> </ul> <ul class="tab-content"> <li id="a" class="tab-pane active">aaa</li> <li id="b" class="tab-pane">bbb</li> <li id="c" class="tab-pane">ccc</li> </ul> </div> </body> <script> /* 标签页 内容 — tab-content — tab-pane — data-toggle="tab" — href对应id — 淡入淡出方式 fade in active — 鼠标移入方式 js 控制 tab("show") — 带下拉菜单的切换 */ </script>