实践 - Tab选项卡切换（滑动、点击切换，延迟切换和自动切换效果）

最新推荐文章于 2022-11-23 11:42:49 发布

zhiyang_csdn

最新推荐文章于 2022-11-23 11:42:49 发布

阅读量2.1k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： Tag 选项卡切换滑动点击切换延迟切换和自动切换效果

本文链接：https://blog.youkuaiyun.com/zhiyang_csdn/article/details/77461292

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

这篇博客演示了如何实现Tab选项卡的切换效果，包括滑动、点击切换以及带有延迟和自动切换功能。通过JavaScript代码展示了不同切换方式的实现，涉及知识点包括事件处理（onmouseover、onmouseout、onclick）、定时器（setInterval、clearInterval）以及DOM操作。示例中，每个选项卡对应不同的内容块，当鼠标悬停或点击选项卡时，相应内容块会显示或隐藏。

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

<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>实践 - Tab选项卡切换</title>
</head>
<body>
<div id="notice" class="notice">
	<div id="notice-tit" class="notice-tit">
		<ul>
			<li class="select"><a href="#">HTML</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">jQuery</a></li>
			<li><a href="#">实践</a></li>
			<li><a href="#">优化</a></li>
		</ul>
	</div>
	<div id="notice-con" class="notice-con">
		<div class="mod" style="display: block;">
			<ul>
				<li><a href="#">开发工具Dreamweaver</a></li>
                <li><a href="#">HTML和CSS课程</a></li>
				<li><a href="#">网页布局</a></li>
				<li><a href="#">实践</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
                <li><a href="#">js基础</a></li>
				<li><a href="#">事件处理</a></li>
				<li><a href="#">js动画</a></li>
				<li><a href="#">js实践</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="#">jQuery基础</a></li>
                <li><a href="#">jQuery插件</a></li>
				<li><a href="#">Ajax基础</a></li>
				<li><a href="#">jQuery实践</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
                <li><a href="#">企业网站</a></li>
				<li><a href="#">电商网站</a></li>
			</ul>
		</div>
		<div class="mod" style="display: none;">
			<ul>
				<li><a href="#">网站优化</a></li>
                <li><a href="#">web调试工具</a></li>
			</ul>
		</div>
	</div>
</div>
</body>
</html>

*{margin:0;padding:0;list-style:none;font-size:12px;}
	.notice{overflow:hidden;margin:10px;width:298px;height:98px;border:1px solid #eee;}
	.notice-tit{position:relative;height:27px;background:#F7F7F7;}
	.notice-tit ul{position:absolute;left:-1px;width:301px;}
	.notice-tit li{float:left;overflow:hidden;padding:0 1px;width:58px;height:26px;border-bottom:1px solid #eee;background:#FFF;background:#F7F7F7;text-align:center;line-height:26px;}
	.notice-tit li.select{padding:0;border-right:1px solid #eee;border-left:1px solid #eee;background:#FFF;font-weight:bolder;border-bottom-color:#FFF;}
	.notice li a:link,.notice li a:visited{color:#000;text-decoration:none;}
	.notice li a:hover{color:#F90;}
	.notice-con .mod{margin:10px 6px;}
	.notice-con .mod ul li{float:left;overflow:hidden;width:143px;height:25px;}

<script type="text/javascript">
/*
运用到的知识点:
	onmouseover() 鼠标指针移动到元素上时触发
	onmouseout() 鼠标指针离开当前某一个选项时触发
	onclick() 鼠标点击元素时触发
	clearInterval() 方法可取消由 setInterval() 设置的 timeout。方法的参数必须是由 setInterval() 返回的 ID 值。
*/

//1.滑动，点击切换效果  把onmouseover 替换 onclick 为点击方式
	window.onload = function(){
		// 获取鼠标滑过或点击的标签和要切换内容的元素
		var notice_tit = document.getElementById("notice-tit");
		var notice_con = document.getElementById("notice-con");
		var titles = notice_tit.getElementsByTagName("li");
		var divs = notice_con.getElementsByTagName("div");
		// 如果titles个数跟divs个数不等的话，下面代码就不用执行了
		if(titles.length != divs.length){
			return;
		}
		// 遍历titles下的所有li
		for(var i=0; i<titles.length; i++){
			titles[i].id = i; //创建索引ID
			titles[i].onmouseover = function(){ //鼠标划过当前某一个选项时
				// 清除所有li上的class
				for(var j=0; j<titles.length; j++){
					titles[j].className = "";
					divs[j].style.display = "none";
				}
				// 设置划过当前选项为高亮显示
				this.className = "select";
				divs[this.id].style.display = "block";
			}
		}
	}

//2.延迟效果切换
/*
	window.onload=function(){
	  	var notice_tit = document.getElementById("notice-tit");
		var notice_con = document.getElementById("notice-con");
		var titles = notice_tit.getElementsByTagName("li");
		var divs = notice_con.getElementsByTagName("div");

		var index = 0;     // 标签的索引
	    var timer = null;  // 创建定时器
		// 如果titles个数跟divs个数不等的话，下面代码就不用执行了
		if(titles.length != divs.length){
			return;
		}
	  	// 遍历titles下的所有li
	  	for(var i=0;i<titles.length;i++){
	    	titles[i].id = i;
	    	titles[i].onmouseover = function(){ //鼠标划过当前某一个选项时
		      	// 用that这个变量来引用当前滑过的li
		      	var that = this;
		      	// 如果存在准备执行的定时器，立刻清除，只有当前停留时间大于500ms时才开始执行
		      	if(timer){
		        	clearTimeout(timer);
		        	timer=null;
		      	}
		      	// 延迟半秒执行
		      	timer = window.setTimeout(function(){
		      		// 清除所有li上的class
		        	for(var j=0;j<titles.length;j++){ 
		          		titles[j].className = '';
		          		divs[j].style.display = 'none';
		        	}
		        	// 设置划过当前选项为高亮显示
		        	titles[that.id].className = 'select';
		        	divs[that.id].style.display = 'block';
		      	},500);
	    	}
	  	}
	}
*/
//3.自动切换效果
/*
	window.onload=function(){
	  	var notice_tit = document.getElementById("notice-tit");
		var notice_con = document.getElementById("notice-con");
		var titles = notice_tit.getElementsByTagName("li");
		var divs = notice_con.getElementsByTagName("div");

		var index = 0;     // 标签的索引
	    var timer = null;  // 创建定时器
		
	    for(var i=0;i<titles.length;i++){
		    titles[i].id = i;
		    titles[i].onmouseover = function(){ //鼠标划过当前某一个选项时
		      	clearInterval(timer); //取消定时器
		      	changeOption(this.id); //执行切换函数
		    }
		    titles[i].onmouseout = function(){  //鼠标离开当前某一个选项时
		      	timer = setInterval(autoPlay,2000);    
		    }
		}
		//当前定时器为真时
		if(timer){//如果有等待的定时器，把定时器清空
		    clearInterval(timer); 
		    timer = null; 
		} 

		timer = setInterval(autoPlay,2000);
		//给索引值设置个限制，当索引大于或者等于选项列表个数时，索引值为0,函数就会一直循环播放
		function autoPlay(){
		    index++;
		    if(index >= titles.length){
		        index = 0;
		    }
		    changeOption(index);
		}
		//自动切换函数
		function changeOption(curIndex){
		    for(var j=0;j<titles.length;j++){
		    	// 清除所有li上的class
		       	titles[j].className = '';
		       	divs[j].style.display = 'none';
		    }
		    // 设置划过当前选项为高亮显示
		    titles[curIndex].className = 'select';
		    divs[curIndex].style.display = 'block';
		    index = curIndex;
		}
	}
*/

</script>