选项卡切换特效

最新推荐文章于 2023-12-05 15:40:13 发布

.Passion

最新推荐文章于 2023-12-05 15:40:13 发布

阅读量367

点赞数

本文链接：https://blog.csdn.net/qq_43923045/article/details/104101624

版权

bootstrap 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

方法一：使用 data-toggle 声明式触发 bootstrap的 js插件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	 

</head>
<body>
	<hr>
	<br>
  
	 <!--
	 
	 重点来了： js选项卡布局 特效
	 -->
	 <div class="container">
		 <!-- 选项卡 -->
		 <ul class="nav nav-tabs">
		 	<li class="active">
		 		<a href="#p1" data-toggle="tab">搜索</a>
		 	</li>
		 	<li>
		 		<a href="#p2" data-toggle="tab">常规</a>
		 	</li>
		 	<li>
		 		<a href="#p3" data-toggle="tab">查看</a>
		 	</li>
		 	<li>
		 		<a href="#p4" data-toggle="tab">文章</a>
		 	</li>
		 </ul>
		 <!--面板-->
		<div class="tab-content">
			<div class="tab-pane" id="p1">
				面板1啦啦
			</div>
			<div class="tab-pane fade" id="p2">
				面板2啦啦
			</div>
			<div class="tab-pane in" id="p3">
				面板3啦啦
			</div>
			<div class="tab-pane fade in" id="p4">
				面板4啦啦
			</div>
			
		</div>
	 </div>
	 
	 
	
</body>
</html>

在这里插入图片描述
方法二：使用 js监听触发

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/bootstrap-theme.min.css">
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	 

</head>
<body>
	<hr>
	<br>
  
	 <!--
	 
	 重点来了： js选项卡布局 特效
	 -->
	 <div class="container">
		 <!-- 选项卡 -->
		 <ul class="nav nav-tabs my-class">
		 	<li class="active">
		 		<a href="#p1">搜索</a>
		 	</li>
		 	<li>
		 		<a href="#p2">常规</a>
		 	</li>
		 	<li>
		 		<a href="#p3">查看</a>
		 	</li>
		 	<li>
		 		<a href="p4">文章</a>
		 	</li>
		 </ul>
		 <!--面板-->
		<div class="tab-content">
			<div class="tab-pane" id="p1">
				面板1啦啦
			</div>
			<div class="tab-pane" id="p2">
				面板2啦啦
			</div>
			<div class="tab-pane" id="p3">
				面板3啦啦
			</div>
			<div class="tab-pane" id="p4">
				面板4啦啦
			</div>
			
		</div>
	 </div>
	 
	 <script>
		 $(function(){
			 
			 $('.my-class a').click(function(e){
				 e.preventDefault();
				 $(this).tab('show');
				 
				 
				 
			 });
			 
			 
		 });
	 </script>
	 
	
</body>
</html>