<!DOCTYPE html><html><head lang="en"> ???<meta charset="UTF-8"> ???<title></title> ???<style type="text/css"> ???????* { ???????????margin: 0; ???????????padding: 0; ???????} ???????ul { ???????????list-style: none; ???????} ???????.wrapper { ???????????width: 1000px; ???????????height: 475px; ???????????margin: 0 auto; ???????????margin-top: 100px; ???????} ???????.tab { ???????????border: 1px solid #ddd; ???????????border-bottom: 0; ???????????height: 36px; ???????????width: 320px; ???????} ???????.tab li { ???????????position: relative; ???????????float: left; ???????????width: 80px; ???????????height: 34px; ???????????line-height: 34px; ???????????text-align: center; ???????????cursor: pointer; ???????????border-top: 4px solid #fff; ???????} ???????.tab span { ???????????position: absolute; ???????????right: 0; ???????????top: 10px; ???????????background: #ddd; ???????????width: 1px; ???????????height: 14px; ???????????overflow: hidden; ???????} ???????.products { ???????????width: 1002px; ???????????border: 1px solid #ddd; ???????????height: 476px; ???????} ???????.products .main { ???????????float: left; ???????????display: none; ???????} ???????.products .main.selected { ???????????display: block; ???????} ???????.tab li.active { ???????????border-color: red; ???????????border-bottom: 0; ???????} ???</style></head><body><div class="wrapper"> ???<ul class="tab"> ???????<li class="tab-item active">1<span>◆</span></li> ???????<li class="tab-item">2<span>◆</span></li> ???????<li class="tab-item">3<span>◆</span></li> ???????<li class="tab-item">4</li> ???</ul> ???<div class="products"> ???????<div class="main selected"> ???????????<a href="###"><img src="imgs/1.jpg" /></a> ???????</div> ???????<div class="main"> ???????????<a href="###"><img src="imgs/2.jpg" /></a> ???????</div> ???????<div class="main"> ???????????<a href="###"><img src="imgs/3.jpg" /></a> ???????</div> ???????<div class="main"> ???????????<a href="###"><img src="imgs/4.jpg" /></a> ???????</div> ???</div></div><script> ???var lis = document.querySelectorAll(".tab-item"); ???var divs = document.querySelectorAll(".main"); ???// 注册鼠标经过事件 ???for(var i = 0; i < lis.length; i++) { ???????lis[i].index = i; ???????lis[i].onmouseover = function () { ???????????// 让当前li有active类，其他li没有active类型 ???????????for(var i = 0; i < lis.length; i++) { ???????????????lis[i].classList.remove("active"); ???????????????divs[i].classList.remove("selected"); ???????????} ???????// 让对应下标的div有selected类，其他div没有selected类 ???????????this.classList.add("active"); ???????????divs[this.index].classList.add("selected"); ???????}; ???}</script></body></html> ???????jquery tab栏切换
原文地址：https://www.cnblogs.com/miss-yang/p/10308825.html