案例事件委托详情页切换案例

最新推荐文章于 2023-02-23 19:45:03 发布

qq_38068491

最新推荐文章于 2023-02-23 19:45:03 发布

阅读量466

点赞数

本文链接：https://blog.csdn.net/qq_38068491/article/details/83038264

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 700px;
				background: red;
				margin: 10px auto;
				font-size: 14px;
			}
			.content{
				width: 540px;
				height: 400px;
				background: burlywood;
				float: left;
				display: none;
			}
			ul{
				list-style: none;
				width: 155px;
				background: bisque;
				padding: 5px 0 5px 5px;
				float: left;
			}
			ul li{
				width: 150px;
				padding: 5px 0 5px 5px;
				margin: 5px 0;
			}
			ul li span{
				float: right;
				font-family: "楷体";
			}
			.animaites{
				background: burlywood;
				transition: all 0.5s;
				box-shadow: #FF0000 1px 2px 1px;
				font-family: "楷体";
				color: white;
				border-radius: 5px 0 0 5px;
			}
		</style>
	</head>
	<body bgcolor="#444444">
		<div id="box">
			<ul id="tab">
				<li class="animaites">儒道至圣<span>>>>></span></li>
				<li>极品家丁<span><<<<</span></li>
				<li>武道至圣<span><<<<</span></li>
				<li>武极天下<span><<<<</span></li>
				<li>大主宰<span><<<<</span></li>
				<li>校花的贴身高手<span><<<<</span></li>
			</ul>
			<div style="display: block;" class="content">儒道至圣</div>
			<div class="content">极品家丁</div>
			<div class="content">武道至圣</div>
			<div class="content">武极天下</div>
			<div class="content">大主宰</div>
			<div class="content">校花的贴身高手</div>
		</div>
	</body>
</html>
<script src="public.js"></script>
<script type="text/javascript">
		var tab=document.getElementById("tab");
		var li = document.getElementsByTagName("li");
		var content=document.getElementsByClassName("content");
		tab.onclick=function(e){
			var e=e||event;
			var target=e.target||e.srcElement;
			if(target.nodeName.toLowerCase()=="li"){
				for(var i=0;i<li.length;i++){
					li[i].index = i;
					li[i].className="";
					li[i].children[0].innerHTML="<<<<";
					content[i].style.display="none";
				}
				target.className="animaites";
				target.children[0].innerHTML=">>>>";
				content[target.index].style.display="block";
				
			}
		}
			
</script>

qq_38068491

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
案例事件委托详情页切换案例

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; *{ margin: 0; padding: 0
复制链接

扫一扫