代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<title>选项卡</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
<style>
#container {
width: 405px;
text-align: center;
margin: 200px auto;
}
#container a {
width: 100px;
height: 40px;
line-height: 40px;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
border-top: solid 1px #FF4400;
text-decoration: none;
float: left;
color: black;
}
#container a:hover {
color: #FF4400;
}
.clear {
clear: both;
}
.content {
display: none;
}
.content {
width: 363px;
height: 140px;
border-bottom: solid 1px #FF4400;
border-left: solid 1px #FF4400;
border-right: solid 1px #FF4400;
padding: 30px 0 0 40px;
}
.content img {
text-align: center;
padding: 30px auto;
}
#container a.on {
background: #FF4400;
color: #fff;
}
</style>
</head>
<body>
<div id="container">
<a href="#" class="on" count="0">电信</a>
<a href="#" count="1">移动</a>
<a href="#" count="2">联通</a>
<a href="#" count="3" style="border-right: solid 1px #FF4400;">铁通</a>
<div class="clear"></div>
<div class="content" style="display:block;">
<img src="../选项卡/images/1.png" />
</div>
<div class="content">
<img src="../选项卡/images/2.png" />
</div>
<div class="content">
<img src="../选项卡/images/3.png" />
</div>
<div class="content">
<img src="../选项卡/images/4.png" />
</div>
</div>
<script>
var titles = document.getElementsByTagName("a");
var content = document.getElementsByClassName("content");
for (let index = 0; index < titles.length; index++) {
titles[index].onclick = function () {
for (let j = 0; j < titles.length; j++) {
titles[j].className = '';
content[j].style.display = 'none';
}
titles[index].className = 'on';
// content[index].style.display = 'block';
content[this.getAttribute('count')].style.display = 'block';
}
}
</script>
</body>
</html>