jQuery-点击切换练习（3种写法）

最新推荐文章于 2022-04-27 19:36:03 发布

LRight-T

最新推荐文章于 2022-04-27 19:36:03 发布

阅读量228

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_44604924/article/details/108300356

版权

描述：点击时，进行TAB切换
完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>切换练习</title>
		<style type="text/css">
			
			ul li{
				display: block;
				list-style: none;
				height: 50px;
				width: 80px;
				float: left;
			}
			#tab1{
				background-color: greenyellow;
			}
			#tab2{
				background-color: skyblue;
			}
			#tab3{
				background-color: pink;
			}
			#container{
				position: relative;
				clear: both;
				left: 40px;
			}
			#content1{
					width: 240px;
				height: 100px;
				background-color: aliceblue;
			}
			#content2{
					width: 240px;
				height: 100px;
				background-color:aquamarine;
			}
			#content3{
					width: 240px;
				height: 100px;
				background-color:cyan;
			}
		</style>
		<script type="text/javascript" src="../js/jquery-3.1.1/jquery-3.1.1.min.js" ></script>
		<script type="text/javascript">
			$(function(){
				//写法1：
				// $('#tab1').click(function(){
				// 	$("#content1").css("display","block");
				// 	$("#content2").css("display","none");
				// 	$("#content3").css("display","none");
				// });
				// $('#tab2').click(function(){
				// 	$("#content2").css("display","block");
				// 	$("#content1").css("display","none");
				// 	$("#content3").css("display","none");
				// });
				// $('#tab3').click(function(){
				// 	$("#content3").css("display","block");
				// 	$("#content1").css("display","none");
				// 	$("#content2").css("display","none");
				// });

				//写法2：
			    var	$container = $("#container>div");
			    
				$("#tab>li").click(function(){
					$container.css("display","none");
				// 	//得到当前点击的li在兄弟中的下标
					var index=$(this).index();
					$container[index].style.display = "block";//$container[index]是dom元素
					// $($container[index]).css("display","block");//与上一句意思一样，但是使用的是jquery对象完成

					/*
					写法3： 另一种更高效的写法
					  var	$container = $("#container>div");
					  var currentIndex = 0;
					 
					  $("#tab>li").click(function(){
					  	//隐藏当前已经显示的内容div 
					  	$container[currentIndex].style.display = "none";
				
					//得到当前点击的li在兄弟中的下标
					var index=$(this).index();
					$container[index].style.display = "block";
					更新下标 currentIndex = index;
					 * */
				});
			});
		</script>
	</head>
	<body>
		<h2>点击切换TAB</h2>
		<ul id="tab">
			<li id="tab1" value='1'>10元套餐</li>
			<li id="tab2" value='2'>30元套餐</li>
			<li id="tab3" value='3'>50元套餐</li>
		</ul>
		<div id="container">
			<div id="content1" style="display: block;">套餐详情，每次可拨打一百分钟，超出两毛钱一份钟</div>
			<div id="content2" style="display: none;">套餐详情，每次可拨打两百分钟，超出两毛钱一份钟</div>
			<div id="content3" style="display: none;">套餐详情，每次可拨打三百分钟，超出两毛钱一份钟</div>
		</div>
	</body>
</html>

LRight-T

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery-点击切换练习（3种写法）

描述：点击时，进行TAB切换完整代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>切换练习</title> <style type="text/css"> ul li{ display: block; list-style: none; height: 50px; width: 80
复制链接

扫一扫