学以致用，虽然简短

1丶开发工具与关键技术：DW
2丶作者：超级小贱贱
3丶撰写时间：2019年1月19日

Html + JS ===>小作品
白菜作品，表达不全，请各位大神多多指教

下面就是Html的代码块儿：

<body>
	<div class="tab">
		<ul class="button" id="button">
			<li class="active">
				<a href="javascript:;">①</a>
			</li>
			<li><a href="javascript:;">②</a></li>
			<li><a href="javascript:;">③</a></li>
			<li><a href="javascript:;">④</a></li>
			<li><a href="javascript:;">⑤</a></li>
			<li><a href="javascript:;">⑥</a></li>
		</ul>
		<div class="word">
			<div class="mod">
				嘿嘿嘿
			</div>
			<div class="mod hid">
				略略略
			</div>
			<div class="mod hid">
				嘎嘎嘎
			</div>
			<div class="mod hid">
				哈哈哈
			</div>
			<div class="mod hid">
				丫丫丫
			</div>
			<div class="mod hid">
				呃呃呃
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js.js"></script>
</body>

紧接着样式：

<style>
	*{
		margin:0;
		padding:0;
	}
	li{
		list-style:none;
	}
	a{
		text-decoration:none;
	}
	.tab{
		width:400px;
		height: 200px;
		border: 1px solid #DB534E;
		margin: 10px auto;
	}
	.button{
		height: 40px;
		background:#ECAEAF;
	}
	.button li{
		float: left;
		width: 60px;
		height: 40px;
		text-align: center;
		line-height: 40px;
	}
	.button li a{
		padding: 9px;
		color:black;
	}
	.word{
		height:130px;
		padding:15px;
		position: relative;
	}
	.word .mod{
		height: 130px;
		position: absolute;
	}
	.hid{
		display:none;
	}
	.button li.active{
		background: white;
	}
	.button li.active a{
		color:#EF7E64;
	}
</style>

最后是JS代码：

window.function(){
	var liList = document.getElementById("button").getElementsByTagName("li");//按钮
	var divList = document.getElementsByClassName("mod");//内容
	
	//判断按钮与内容长度是否一致
	if(liList.length!==divList.length){
		return;
	}
	
	for(var i=0;i<liList.length;i++){
		liList[i].id = i;
		liList[i].onclick=function(){
			//去掉当前按钮的高亮样式以及隐藏对应内容区
			var that = this;
			setTimeout(function(){
				for(var j=0;j<liList.length;j++){
					if(liList[j].className ==="active"){
						liList[j].className = "";
						divList[j].style.display = "none";
					}
				}
				that.className = "active";
				divList[that.id].style.display = "block";
			},1000);//延迟1秒执行
		};
	}
};

最后是效果图：
在这里插入图片描述

效果讲示：
每点击一个按钮button，就会延迟1秒在跳转，如图所示，剩下的以此类推。

请各位大神留点意见吧！
过程虽短，表达不全，还请多多请教！

学以致用，虽然简短

猜你喜欢