jQuery学习:地址显示和隐藏-鼠标移入移除

¡Venceremo

于 2022-11-16 20:28:14 发布

阅读量744

点赞数

分类专栏： jquery 文章标签： jquery 学习 css

本文链接：https://blog.csdn.net/weixin_47295886/article/details/127892639

版权

jquery 专栏收录该内容

56 篇文章 1 订阅

订阅专栏

点击显示+鼠标划入监听点×可以隐藏+鼠标点击监听

+里面实现tab的切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/jquery-3.6.1.js"></script>
		<style>
			#store_select {
				background: #bfa;
				display: inline-block;
				padding: 5px;
			}

			#store_close {
				display: inline-block;
				padding: 5px;
				width: 10px;
				background: red;
			}

			#store_tabs {
				list-style-type: none;
				padding: 0px;
				margin: auto;
				background-color: blue;
			}

			#store_tabs li {
				display: inline-block;
				width: 40px;
				text-align: center;
				background: yellow;
				margin: 5px;
			}

			#store_container {
				background: orange;
				text-align: center;
				padding: 5px;
			}
		</style>
	</head>
	<body>
		<div id="store_select">
			<!-- 鼠标移入移出的监听 操作下面的显示隐藏 -->
			<input type="text" name="" id="" placeholder="请输入地址">
			<div id="store_content" style="display: none">
				<ul id="store_tabs">
					<li>1</li>
					<li>2</li>
					<li>3</li>
					<div id="store_container">
						<div id="content1">Lorem.</div>
						<div id="content2" style="display: none;">Lorem, ipsum.</div>
						<div id="content3" style="display: none;">Lorem, ipsum dolor.</div>
					</div>
				</ul>
			</div> <!-- 显示的内容 -->
			<div id="store_close" style="display: none;"> x </div><!-- ×还有一个点击监听 -->
		</div>
		<script>
			address();
			clickTabs();

			function address() {
				$("#store_select")
					.hover(
						function() { //鼠标移入
							//下面的两个孩子 显示
							$(this).children(':gt(0)').show()
						},
						function() { //鼠标移出
							$(this).children(':gt(0)').hide()

						})
					.children(':last').click(function() { //最后一个元素加点击监听
						//thisz转变了
						$(this).parent().children(':gt(0)').hide()
					})
			};
			var $containers = $('#store_container>div'); //隐藏显示的内容
			var curIndex = 0; //当先的下标是0
			function clickTabs() {
				$('#store_tabs>li').click(function() {
					$containers[curIndex].style.display = 'none'; //将当前的隐藏
					var index = ($(this).index());
					$containers[index].style.display='block';
					curIndex=index;
				})

			}
		</script>
	</body>
</html>