ES5与ES6面向对象，写选项卡

最新推荐文章于 2024-08-21 14:09:37 发布

似琼碧落

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量106

点赞数

文章标签： javascript html5 html es6

本文链接：https://blog.csdn.net/qq_52900794/article/details/120711229

版权

这篇博客展示了如何使用ES5和ES6来实现HTML导航菜单与内容区域的交互效果。通过对比两种JavaScript语法，解释了如何在鼠标悬停时改变选卡的样式和显示相应的内容。示例中，选卡和内容通过CSS进行布局，而JavaScript处理了高亮显示和内容切换的逻辑。

摘要由CSDN通过智能技术生成

ES5:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			* {
				text-align: center;
			}

			nav li {
				display: inline;
				width: 24%;
				text-decoration: none;
				padding: 15px;
			}

			li:hover {
				background-color: lightblue;
			}

			section {
				height: 300px;
			}
			.tab{
				display: block;
			}
			 section {
				display: none;
			}
		</style>
	</head>
	<body>
		<nav id="nav">
			<ul>
				<li >选卡1</li>
				<li>选卡2</li>
				<li>选卡3</li>
				<li>选卡4</li>
			</ul>
		</nav>
		<div id="container">
			<section  class="tab" style="background-color: tomato;">内容1</section>
			<section  style="background-color: cyan">内容2</section>
			<section  style="background-color: blueviolet">内容3</section>
			<section  style="background-color: gold">内容4</section>
		</div>
		<script>
			window.onload = function() {
				var li=document.getElementsByTagName('li');
				var sec=document.getElementsByTagName('section');
				console.log(li);
				for (var i = 0; i < li.length; i++) {
					li[i].index=i;
					li[i].onmouseover=function  () {
						for (var i = 0; i < li.length; i++) {
							li[i].className='';
							sec[i].className='';
						}
						sec[this.index].className='tab';
					}
				}
			};
		</script>
	</body>
</html>

ES6:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<style>
			* {
				text-align: center;
			}

			li {
				display: inline;
				width: 24%;
				text-decoration: none;
				padding: 15px;
			}

			li:hover {
				background-color: lightblue;
			}

			section {
				height: 300px;
			}

			.tab {
				display: block;
			}

			section {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">


			<ul>
				<li id="li">选卡1</li>
				<li>选卡2</li>
				<li>选卡3</li>
				<li>选卡4</li>
			</ul>

			<div id="container">
				<section class="tab" style="background-color: tomato;">内容1</section>
				<section style="background-color: cyan">内容2</section>
				<section style="background-color: blueviolet">内容3</section>
				<section style="background-color: gold">内容4</section>
			</div>
		</div>
		<script>
			var li = document.getElementById('li');
			

			function Pander(sed) {
				this.sed = document.querySelector(sed)
				this.btn = this.sed.querySelectorAll('ul>li')
				this.sec = this.sed.querySelectorAll('div>section')
				this.change()
			}

			Pander.prototype.change = function() {
				this.btn.forEach((item, index) => {
					item.addEventListener('mouseover', () => {
						this.btn.forEach((t, i) => {
							t.className = ''
							this.sec[i].className = ''
						})
						this.sec[index].className = 'tab'
					})
				})
			}
			let d1 = new Pander('.box')
		</script>
	</body>
</html>

似琼碧落

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES5与ES6面向对象，写选项卡

ES5:<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { text-align: center; } nav li { display: inline; width: 24%; text-decoration: n
复制链接

扫一扫