jQuery笔记之动画以及tab的切换

最新推荐文章于 2022-07-06 12:55:08 发布

ArryLuo123

最新推荐文章于 2022-07-06 12:55:08 发布

阅读量535

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/ArryLuo123/article/details/57078374

版权

jQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

通过demo进行验证

(1)演示删除动画效果

<!DOCTYPE html>
<html>
	
	<head>
		<meta charset="UTF-8">
		<style type="text/css">
			* {
				font-size: 12px;
			}
			
			#cart {
				width: 602px;
			}
			
			#cart .tipsbox {
				width: 200px;
				border: 2px solid #aaa;
				float: right;
			}
		</style>
		<title>删除动画</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script>
			$(function() {
				$("#del").click(function() {
					$(".tipsbox").show("slow");
				});
				//用了基本选择器中的交集选择器和属性选择器
				$("input[name=cancel]").click(function() {
					$(".tipsbox").hide("fast");
				});
			});
		</script>

	</head>

	<body>
		<div id="cart">
			<table width="600" border="1" cellpadding="0" cellspacing="0">
				<tr>
					<th><input type="checkbox" /> 全选</th>
					<th>商品信息</th>
					<th>宜美惠价</th>
					<th>数量</th>
					<th>操作</th>
				</tr>
				<tr>
					<td><input type="checkbox" /></td>
					<td><img src="img/umbrella.gif" />
						<a href="#">天堂直杆彩虹伞</a>
					</td>
					<td>￥32.9元</td>
					<td><input type="text" value="1" /></td>
					<td>
						<a href="#" id="del">删除</a>
					</td>
				</tr>
			</table>
			<div class="tipsbox" style="display:none;">
				<p>确定要删除吗？</p>
				<p>
					<input name="confirm" type="button" value="确认" class="btns" />
					<input name="cancel" type="button" value="取消" class="btns" />
				</p>
			</div>
		</div>
	</body>

</html>

(2)演示可伸缩菜单

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>可伸缩菜单</title>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<style type="text/css">
			ul {
				list-style: none;
				padding: 5px;
				width: 210px;
				border: 1px solid red;
			}
			
			a {
				text-decoration: none;
				line-height: 30px;
			}
			
			.menu_style li {
				border-bottom: 1px solid #666;
			}
		</style>
		<script>
			$(function() {
				//获取最底部的按钮
				$("input[name=more_btn]").click(function() {
					//将大于5的id全部隐藏起来
					//toggle用于切换的点击事件
					//用到了过滤器中以及基本选择器中的交集选择器
					$("li:gt(5):not(:last)").toggle();
					//淡入淡出
					//$("li:gt(5):not(:last)").fadeOut(2000);
					//$("li:gt(5):not(:last)").fadeIn(1000);
					//改变元素高度
					$("li:gt(5):not(:last)").slideUp("slow"); //用200毫秒快速将段落滑上
					$("li:gt(5):not(:last)").slideDown("slow"); //用200毫秒快速将段落滑下
				});
			});
		</script>
	</head>

	<body>
		<div id="menu" class="menu_style">
			<ul>
				<li>
					<a href="#">手机通讯、数码电器</a>
				</li>
				<li>
					<a href="#">食品饮料、酒水、果蔬</a>
				</li>
				<li>
					<a href="#">进口食品、进口牛奶</a>
				</li>
				<li>
					<a href="#">美容化妆、个人护理</a>
				</li>
				<li>
					<a href="#">母婴用品、个人护理</a>
				</li>
				<li>
					<a href="#">厨卫清洁、纸、清洁剂</a>
				</li>
				<li id="menu_07" class="element_hide">
					<a href="#">家居家纺、锅具餐具</a>
				</li>
				<li id="menu_08" class="element_hide">
					<a href="#">生活电器、汽车生活</a>
				</li>
				<li id="menu_09" class="element_hide">
					<a href="#">电脑、外设、办公用品</a>
				</li>
				<li class="btn">
					<input name="more_btn" type="button" value="展开或关闭菜单项" />
				</li>
			</ul>
		</div>
	</body>

</html>

(3)演示tab的切换

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>tab的切换</title>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		
		#tabs {
			width: 290px;
			height: 194px;
			border: 1px solid #E7E5E4;
		}
		
		#tabs .tabs-top {
			height: 33px;
			background-color: #F7F5F4;
			border: 1px solid #E4E4E4;
		}
		
		#tabs .tabs-top ul {
			list-style: none;
		}
		
		#tabs .tabs-top ul li {
			display: block;
			float: left;
			height: 22px;
			line-height: 22px;
			margin-top: 8px;
			padding-left: 15px;
			padding-right: 15px;
			color: #666666;
			cursor: pointer;
		}
		
		#tabs .tabs-top ul li.choosed {
			border: 1px solid #E4E4E4;
			border-top: 2px solid #ff0000;
			border-bottom: 1px solid #F7F5F4;
			color: #000000;
		}
		
		#tabs .tabs-body {
			padding: 5px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
	<script>
		$(function() {
			//用到了后代选择器
			/**
			 * 通过div中tabs ，找到他下面的所有后代tabs-top元素.<br>
			 * 然后通过tabs-top找到他下面所有后代的ul的元素<br>
			 * 最后通过ul找到他下面所有后代的li的元素
			 */
			$("#tabs .tabs-top ul li").click(function() {
				//alert("das");
				$(this).addClass("choosed");
				//通过siblings找到同辈元素
				$(this).siblings().removeClass("choosed");
				//先把tabs-body隐藏起来
				$("#tabs .tabs-body .content").hide();
				//然后通过角标所对应的值
				$("#tabs .tabs-body .content").eq($(this).index()).show();
			});
		});
	</script>

	<body>
		<div id="tabs">
			<div class="tabs-top">
				<ul>
					<li class="choosed">手机充值</li>
					<li>彩票</li>
				</ul>
			</div>
			<div class="tabs-body">
				<div class="content">
					<img src="img/content1.gif"></img>
				</div>
				<div class="content" style="display: none;">
					<img src="img/content2.gif"></img>
				</div>
			</div>
		</div>
	</body>

</html>

对其总结

ArryLuo123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery笔记之动画以及tab的切换

通过demo进行验证(1)演示删除动画效果 * { font-size: 12px; } #cart { width: 602px; } #cart .tipsbox { width: 200px; border: 2px solid #aaa; float: right;
复制链接

扫一扫

专栏目录