1，Bootstrap写法：
效果图：
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title> 应用</title>
<link href="bootstrap.min.css" rel="stylesheet" style="test/css">
<script src="jquery-2.2.3.min.js"></script>
<script src="bootstrap.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<ul id="myTabs" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li class="dropdown">
<a href="#" id="myTabdrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li><a href="#D1" tabindex="-1" data-toggle="tab">D1</a></li>
<li><a href="#D2" tabindex="-1" data-toggle="tab">D2</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>1</p>
</div>
<div class="tab-pane fade" id="profile">
<p>2</p>
</div>
<div class="tab-pane fade" id="D1">
<p>3</p>
</div>
<div class="tab-pane fade" id="D2">
<p>4</p>
</div>
</div>
</div>
<!-- <script>
// $("#myTabs a:last").tab("show");
// $("#myTabs li:eq(0) a").tab("show"); //改变eq后面的数字就行，从0开始
$("a[data-toggle=‘tab‘]").on("shown.bs.tab",function(e){
alert("Hello");
})
</script>
-->
</body>
</html>
Js写法：
效果图：
晚上更新
时间： 2024-11-06 13:51:37