前端html+css+js开发：简单选项卡切换-延时（附源码）_normal 12px “微软雅黑”-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_57210034/article/details/124901224

本文详细介绍了如何使用CSS和JavaScript创建一个带有选项卡切换功能的界面，包括样式设计和事件监听。通过`<ul>`和`<div>`的配合，实现了鼠标悬停时的高亮效果和内容的隐藏显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图：

css代码：

		* {
			margin: 0;
			padding: 0;
			font:normal 12px "微软雅黑";
			color: #3C3C3C;
		}
		ul {
			list-style-type: none;
		}
		a {
			text-decoration: none;
		}
		#tab_list {
			width: 275px;
			height: 190px;
			margin: 20px auto;
		}
		#ul1 {
			border-bottom: 2px solid aqua;
			height: 32px;
		}
		#ul1 li {
			display: inline-block;
			width: 60px;
			line-height: 30px;
			text-align: center;
			border: 1px solid aquamarine;
			border-bottom: none;
			margin-left: 5px;
		}
		#ul1 li:hover {
			cursor: pointer;
		}
		#ul1 li.active {
			border-top: 2px solid #1E90FF;
			border-bottom: 2px solid #fff;
		}
		#tab_list div {
			border: 1px solid #FF5000;
			border-top: none;
		}
		#tab_list div li {
			height: 30px;
			line-height: 30px;
			text-indent: 8px;
		}
		.show {
			display: block;
		}
		.hidden {
			display: none;
		}

html代码：

		<div id="tab_list">
			<ul id="ul1">
				<li class="active">选项一</li>
				<li>选项二</li>
				<li>选项三</li>
			</ul>
			<div class="show">
				<ul>
					<li><a href="javascript:;">选项一内容-1</a></li>
					<li><a href="javascript:;">选项一内容-2</a></li>
					<li><a href="javascript:;">选项一内容-3</a></li>
					<li><a href="javascript:;">选项一内容-4</a></li>
				</ul>
			</div>
			<div class="hidden">
				<ul>
					<li><a href="javascript:;">选项二内容-1</a></li>
					<li><a href="javascript:;">选项二内容-2</a></li>
					<li><a href="javascript:;">选项二内容-3</a></li>
					<li><a href="javascript:;">选项二内容-4</a></li>
				</ul>
			</div>
			<div class="hidden">
				<ul>
					<li><a href="javascript:;">选项三内容-1</a></li>
					<li><a href="javascript:;">选项三内容-2</a></li>
					<li><a href="javascript:;">选项三内容-3</a></li>
					<li><a href="javascript:;">选项三内容-4</a></li>
				</ul>
			</div>
		</div>

js代码：

		window.onload = function() {
			var ul1 = document.getElementById("ul1");
			var aLi = ul1.getElementsByTagName("li");
			var oDiv = document.getElementById("tab_list");
			var aDiv = oDiv.getElementsByTagName("div");
			var timer = null;
			for (var i=0; i<aLi.length; i++) {
				aLi[i].id = i;
				aLi[i].onmouseover = function () {
					var _this = this;//用_this这个变量来引用当前滑过的li
                    /*如果存在准备执行的定时器，立即清除，只能当前停留时间大于500ms时
                     * 
                     *才开始执行（指鼠标快速滑过一个的那一瞬间要清除掉产生的定时器）
                     */
                    if (timer) {
                    	clearTimeout(timer);
                    	timer = null;
                    }
                    
                    //延时半秒执行
                    timer = window.setTimeout(function () {
                    	for (var i=0; i<aLi.length; i++) {
                    		aLi[i].className = "";
                    		aDiv[i].className = "hidden";
                    	}
                    	/*
                    	 * 之所以不能在这直接引用this是因为setTimeout是window对象，
                    	 * 用this的话会指向定时器，所以要在前面定义一个变量
                    	 */
                    	_this.className = "active";
                    	aDiv[_this.id].className = "show";
                    },500);
				}
			}
		}