jq实现多标签切换（三）

最新推荐文章于 2024-09-08 18:41:13 发布

天刚萌萌亮

最新推荐文章于 2024-09-08 18:41:13 发布

阅读量521

点赞数

本文链接：https://blog.youkuaiyun.com/wmeng13/article/details/84451335

版权

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="lib/jquery-1.11.3.js"></script>
	<style type="text/css">
		body,html{
			margin: 0;
			padding: 0;
		}
		#tab li{
			list-style-type: none;
			float: left;
			width:80px;
			height: 40px;
			line-height: 40px;
			text-align: center;
			cursor: pointer;
		}
		#container {
            position: relative;
	    }
	    #content1, #content2, #content3 {
            width: 300px;
            height: 100px;
            padding: 30px;
            position: absolute;
            top: 40px;
            left: 0;
        }
        #tab1, #content1 {
            background-color: #ffcc00;
        }

        #tab2, #content2 {
            background-color: #ff00cc;
        }

        #tab3, #content3 {
            background-color: #00ccff;
        }
	</style>
</head>
<body>
	<h2>实现多标签页效果</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" >
	            10元套餐详情：<br />&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
	        </div>
	        <div id="content2">
	            30元套餐详情：<br />&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
	        </div>
	        <div id="content3">
	            50元包月详情：<br />&nbsp;每月无限量随心打
	        </div>
	    </div>
	    <script type="text/javascript">

	    	$("#tab>li").click(function(event) {
	    		$("#content"+this.value).show().siblings().hide();
	    	});
	    </script>
</body>
</html>