实现效果html代码<!DOCTYPE html><html><head> <title>选项卡练习</title> <link rel=“stylesheet” type=“text/css” href=“reset.css”> <link rel=“stylesheet” type=“text/css” href=“tab.css”></head><body> <div class=“container”> <div class=“tab-link-container”> <ul> <li><a href="#" class=“tab-link “>非上市公司非上市公司</a></li> <li><a href=”#” class=“tab-link tab-hover”>股份公司</a></li> <li><a href="#" class=“tab-link “>股份公司</a></li> </ul> </div> <div class=“tab-content-container”> <div class=“tab-content”> <p>中国石油化工股份有限公司</p> </div> <div class=“tab-content”> <p>账户管理资金归集</p> </div> <div class=“tab-content”> <p>中国化工股份有限公司</p> </div> </div> </div> <script src=“tab.js”></script></body></html>css 代码.container { display: flex; width: 500px; height: 400px; border: 1px solid #000; margin: 0 auto;}.container .tab-link-container { width: 100px; border: 1px solid #00f;}.container .tab-link-container .tab-hover { color: #000; background: linear-gradient(to right, #00f, #fff);}.container .tab-link-container ul { list-style: none;}.container .tab-link-container ul li { height: 40px; text-align: center;}.container .tab-link-container ul li a { display: flex; align-items: center; justify-content: center; line-height: 12px; color: blue; box-sizing: border-box; font-size: 12px; width: 100%; height: 100%; padding: 5px; background: linear-gradient(to right, #0ff, #fff); transition: all 3s;}.container .tab-link-container ul li a:hover { color: #000; background: linear-gradient(to right, #00f, #fff);}.container .tab-content-container { flex: 1 1; border: 1px solid #0ff;}.container .tab-content { display: none; transition: all 1s linear;}js代码let linkArray = document.getElementsByClassName(’tab-link’);for (let i = 0; i < linkArray.length; i++) { linkArray[i].onclick = change;}let currentIndex = 0;init();function init() { changeContent();}function change() { if (this.classList.contains(’tab-hover’)) { return; } removeHoverClass(this); addHoverClass(this); changeContent(this);}function removeHoverClass(that) { let current = document.getElementsByClassName(’tab-hover’)[0]; current.classList.remove(’tab-hover’);}function addHoverClass(that) { that.classList.add(’tab-hover’);}function changeContent() { let contentArray = document.getElementsByClassName(’tab-content’); contentArray[currentIndex].style.display = ’none’; for (let i = 0; i < linkArray.length; i++) { if (linkArray[i].classList.contains(’tab-hover’)) { currentIndex = i; break; } } contentArray[currentIndex].style.display = ‘block’;}