tab切换案例

最新推荐文章于 2024-09-03 17:02:58 发布

Moving up

最新推荐文章于 2024-09-03 17:02:58 发布

阅读量746

点赞数

分类专栏：案例 DOM 文章标签： javascript html 前端 css

本文链接：https://blog.csdn.net/weixin_62219063/article/details/123621084

版权

案例同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

DOM

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.item,ul,li{
				list-style: none;
			}
			a{
				text-decoration: none;
				font-size: 20px;
				line-height: 50px;
				color: black;
			}
			.item>li{
				width: 100px;
				height: 50px;
				float: left;
				text-align: center;
				position: relative;
			}
			.item>li:hover{
				background-color: #DCDCDC;
			}
			.item>li>ul{
				position: absolute;
				top: 50px;
				left: 0px;
				display: none;
			}
			.item>li>ul>li{
				border: 1px solid orange;
				padding:  0 28px;
			}
			.item>li>ul>li:hover{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<ul class="item">
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="#">微博</a>
				<ul>
					<li>
						<a href="#">私信</a>
					</li>
					<li>
						<a href="#">评论</a>
					</li>
					<li>
						<a href="#">@我</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
	<script type="text/javascript">
		var wb = document.querySelector('.item');
		var item = wb.children;
		console.log(wb);
		console.log(item);
		for(var i=0;i<item.length;i++){
			item[i].onmousemove = function(){
				this.children[1].style.display = 'block';
			}
			item[i].onmouseout = function(){
				this.children[1].style.display = 'none';
			}
		}
	</script>
</html>

Moving up

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换案例

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .item,ul,li{ list-style: none; } a{ text-decoration: n.
复制链接

扫一扫

专栏目录