原生JS中点击切换不同内容_js 切换显示不同内容-优快云博客

未经csdn博主（前端-尔嵘）允许不得转载，转载请注明转载路径及说明！

本文链接：https://blog.youkuaiyun.com/XU441520/article/details/94872335

本文介绍了一个使用HTML、CSS和JavaScript实现的163邮箱切换效果案例，通过动态改变元素样式和位置来实现菜单项高亮及内容面板切换。代码详细展示了如何通过获取DOM元素、添加事件监听器并响应点击事件来更新界面状态。

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

效果如下：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>offHight思路</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				width: 400px;
				height: 400px;
				border: 1px solid red;
				/*margin: 50px auto;*/
				/*或者*/
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
			}
			#left{
				width: 100px;
				height: 400px;
				float: left;
				/*border: 1px solid yellow;*/
				position: relative;
				
			}
			#ul1{
				list-style-type: none;
			}
			#ul1 li{
				/*width: 100px;
				height: 100px;
				text-align: center;
				/*怪异盒模型*/
				box-sizing: border-box;
				border: 1px solid gray;
				line-height: 100px;*/
				/*或者*/
				width: 100px;
				height: 100px;
				text-align: center;
				border: 1px solid gray;
				line-height: 98px;
			}
			.active{
				background-color: yellow;
			}
			#slider{
				border: 25px solid transparent;
				border-right-color: darkgray;
				position: absolute;
				top: 0;
				right: 0;
				transition: all 0.5s; 
			}
			#right{
				float: right;
			}
			#right div{ 
				width: 300px;
				height: 400px;
				font-size: 100px;
				display: none;
				/*强制英文单词断行*/
				word-break: break-all;
				/*或者*/
				/*word-break: break-word;*/
			}
			#right div:nth-child(1){
				
				background-color: red;
			}
			#right div:nth-child(2){
				background-color: orange;
			}
			#right div:nth-child(3){
				display: block;
				background-color: blue;
			}
			#right div:nth-child(4){
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="left">
				<ul id="ul1">
					<li class="active">163邮箱</li>
					<li>126邮箱</li>
					<li>yeah.net</li>
					<li>网易手机邮箱</li>
				</ul>
				<div id="slider"></div>
			</div>
			<div id="right">
				<div>163邮箱</div>
				<div>126邮箱</div>
				<div>yeah.net</div>
				<div>网易手机邮箱</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var ul1 = document.getElementById("ul1");
		var lis = document.getElementsByTagName("li");
		var slider = document.getElementById("slider");
		var right = document.getElementById("right");
		var divs = right.getElementsByTagName("div");//四个页面
		//获取高度 offsetHeight,
		//获取宽度 ffsetWidth,
		//定位上边距的数值 offsetTop
		//定位左边距 offsetLeft
		
		var t = (lis[0].offsetHeight-slider.offsetHeight)*0.5; //居中
		//设置滑块top
		slider.style.top = t + "px";

		for(var i=0;i<lis.length;i++){
			lis[i].index = i;//记录下标
			//添加点击事件
			lis[i].onclick = function(){
				for(var j=0;j<lis.length;j++){
					lis[j].className = "";
					divs[j].style.display = "none";//全部隐藏
				}
				this.className = "active";
				//显示对应的页面
				divs[this.index].style.display = "block";
				//改变滑块的位置
//				每次增加 	当前下标*100(li的高度)
//				点击第一个  0*100 +t
//				点击第二个  1*100 +t
				slider.style.top =  this.index*lis[0].offsetHeight + t +"px";
			}
		}
	</script>
</html>