代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<style>
body {font-family: "Lato", sans-serif;}
/* Style the tab */
div.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* Style the buttons inside the tab */
div.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
}
/* Change background color of buttons on hover */
div.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
div.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
/*.tabcontent {*/
/*display: none;*/
/*padding: 6px 12px;*/
/*border: 1px solid #ccc;*/
/*border-top: none;*/
/*}*/
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
}
/* Fade in tabs */
@-webkit-keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
</style>
<body>
<p>点击各个选项卡查看内容:</p>
<div class="tab">
<button id="defaultOpen" class="tablinks" onclick="openCity(event, ‘London‘)">London</button>
<button class="tablinks" onclick="openCity(event, ‘Paris‘)">Paris</button>
<button class="tablinks" onclick="openCity(event, ‘Tokyo‘)">Tokyo</button>
</div>
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
//所有tab-content移除block效果，tab-links先移除active。
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
//根据字符串把对应的tab-content和tab-links加上效果。
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
// tabcontent[i].style.display = "none";
}
// 触发 id="defaultOpen" click 事件,默认让第I一个tabcontent显示。
document.getElementById("defaultOpen").click();
// var tabcontent = document.getElementsByClassName("tabcontent");
// tabcontent[0].style.display = "block";
//
// var tablinks = document.getElementsByClassName("tablinks");
// tablinks[0].className += " active";
</script>
二.淡入弹出效果
如果要淡入弹出的动画效果。则把上面的tabcontent样式加上animation属性。并加上动画的效果fadeEffect定义。
/* Style the tab content */.tabcontent { display: none; padding: 6px 12px; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
/* Fade in tabs */@-webkit-keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;}}
@keyframes fadeEffect { from {opacity: 0;} to {opacity: 1;}}
原文地址：https://www.cnblogs.com/mzzone/p/11094542.html
时间： 2024-08-08 22:07:42