jquery选项卡

最新推荐文章于 2021-08-04 08:43:12 发布

guwen1991

最新推荐文章于 2021-08-04 08:43:12 发布

阅读量795

点赞数

分类专栏：网页特效

本文链接：https://blog.csdn.net/oGuWen1/article/details/12747211

版权

网页特效专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
/*Tab 选项卡 标签*/
$(function(){
	    var $div_li =$("div.tab_menu ul li");
	    $div_li.click(function(){
			$(this).addClass("selected")            //当前<li>元素高亮
				   .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮
            var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。
			$("div.tab_box > div")   	//选取子节点。不选取子节点的话，会引起错误。如果里面还有div 
					.eq(index).show()   //显示 <li>元素对应的<div>元素
					.siblings().hide(); //隐藏其他几个同辈的<div>元素
		}).hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		})
})
</script>
<style>
.tab { 
	width:100%;
}

 .tab_menu { 
	clear:both;
}
 .tab_menu li { 
	float:left; 
	text-align:center; 
	cursor:pointer; 
	list-style:none; 
	padding:1px 6px; 
	margin-right:4px; 
	background:#F1F1F1;
	border:1px solid #898989; 
	border-bottom:none;
}
 .tab_menu li.hover { 
	background:#DFDFDF;
}
 .tab_menu li.selected { 
	color:#FFF; 
	background:#6D84B4;
}
 .tab_box { 
	clear:both; 
	border:1px solid #898989;
}
 .hide{
	display:none}
</style>
</head>

<body>
<div class="tab">
			<div class="tab_menu">
					<ul>
						<li class="selected">产品属性</li>
						<li>产品尺码表</li>
						<li>产品介绍</li>
					</ul>
				</div>
				<div class="tab_box">
					<div>沿用风靡百年的经典全棉牛津纺面料，通过领先的液氨整理技术，使面料的抗皱性能更上一层。延续简约、舒适、健康设计理念，特推出免烫、易打理的精细免烫牛津纺长袖衬衫系列。 
					</div>
					<div class="hide">
					来自新疆无污染的生态棉花，采用紧密纺精梳棉纱，单经双纬的织造组织，造就了颗粒饱满、朴实无华、温润细腻的经典牛津纺，易洗快干、手感丰软、吸湿性好。设计师遵循布料完美肌理，立体剪裁，以直筒明门襟的经典造型、配合圆袋、曲摆的现代人性化裁减，相得益彰，浑然天成。色彩明快的纯色衬衫简洁、自然、为您营造出利落、爽朗的形象，透出热情、优雅的个性；精选白、蓝、淡粉、宽条纹、英国格等10余种明亮、经典花型，色彩缤纷呈现，以适合本季着装，更显自然、舒适境界。
                    </div>
					<div class="hide">
					世界权威德国科德宝的衬和英国高士缝纫线使成衣领型自然舒展、永不变形，缝线部位平服工整、牢固耐磨；人性化的4片式后背打褶结构设计提供更舒适的活动空间；领尖扣的领型设计戴或不戴领带风格炯同、瞬间呈现；醇正天然设计，只为彰显自然荣耀。
					</div>
				</div>
			</div>
		</div>
</body>
</html>

效果图: