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

以你之姓@ 2022-12-02 04:24 138阅读 0赞

描述：点击时，进行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>