JS+CSS简易Tab效果

来源：互联网发布：淘宝男士服装编辑：程序博客网时间：2024/05/21 19:21
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"pageEncoding="ISO-8859-1"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><style type="text/css">#tab {width: 300px;border: 3px solic #CCC;}#tab h3 {margin: 0px;font-size:14px;float: left;width: 60px;height: 24px;background-color: #CCC;text-align: center;line-height: 24px;}#tab div {clear: both;height: 100px;font-size: 14px;padding: 20px;display: none;}#tab .active {background-color: #FFF;}</style><script type="text/javascript">window.onload = function() {var oTab = document.getElementById("tab");var aH3 = oTab.getElementsByTagName("h3");var aDiv = oTab.getElementsByTagName("div");for (var i = 0; i < aH3.length; i++) {aH3[i].index = i;aH3[i].onclick = function() {for (var i = 0; i < aH3.length; i++) {aH3[i].className = "";aDiv[i].style.display = "none";}this.className = "active";aDiv[this.index].style.display = "block";}}}</script></head><body><div id="tab"><h3 class="active">Education</h3><h3>Entertainment</h3><h3>Car</h3><div style="display: block">The Content of Education</div><div>The Content of Entertainment</div><div>The Content of Car</div></div></body></html>
0 0