元素默认都是隐藏的（通过 CSS 和 JS）。当用户点击按钮时，它将打开与该按钮“匹配”的标签页内容。
第二步 - 添加 CSS：
设置按钮和标签页内容的样式：
/* 设置标签页的样式 */
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
/* 设置用于打开标签页内容的按钮的样式 */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* 更改悬停时按钮的背景颜色 */
.tab button:hover {
background-color: #ddd;
}
/* 创建活动/当前的标签链接类 */
.tab button.active {
background-color: #ccc;
}
/* 设置标签页内容的样式 */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
第三步 - 添加 JavaScript：
function openCity(evt, cityName) {
// 声明所有变量
var i, tabcontent, tablinks;
// అన్ని class="tabcontent" కలిగిన మూలకాలను పొంది వాటిని మరియుగా చేయండి
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
// అన్ని class="tablinks" కలిగిన మూలకాలను పొంది క్లాస్ "active" తొలగించండి
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
// ప్రస్తుత టాబ్‌పేజీని ప్రదర్శించండి, మరియు తెరిచిన టాబ్‌పేజీని బటన్‌కు "active" క్లాస్ జోడించండి
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
亲自试一试
టాబ్‌పేజీని అద్దండివేయండి
టాబ్‌పేజీ కంటెంట్‌ను అద్దండివేయడానికి, ఈ సిఎస్ఎస్ ని జోడించండి:
.tabcontent {
animation: fadeEffect 1s; /* ప్రదర్శన మరియు అద్దండి ప్రభావం సుమారు 1 సెకన్లు కొనసాగుతుంది */
}
/* పూర్తి కాని కాంప్లెక్సిటీ నుండి పూర్తి కాని కాంప్లెక్సిటీ వరకు ట్రాన్సిషన్ */
@keyframes fadeEffect {
from {opacity: 0;}
to {opacity: 1;}
}
亲自试一试
డిఫాల్ట్ టాబ్‌పేజీ ప్రదర్శించండి
పేజీ లోడ్ అయ్యేసమయంలో ప్రత్యేక టాబ్‌పేజీని తెరిచివేయడానికి, జావాస్క్రిప్ట్ “క్లిక్” ప్రత్యేక టాబ్‌పేజీ బటన్‌ను ఉపయోగించండి:
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">London</button>
<script>
// id="defaultOpen" ఐడియు పొంది దానిని క్లిక్ చేయండి
document.getElementById("defaultOpen").click();
</script>
亲自试一试
టాబ్‌పేజీని మూసివేయండి
మీరు ప్రత్యేక టాబ్‌పేజీని మూసివేయడానికి, జావాస్క్రిప్ట్‌ను ఉపయోగించి బటన్‌ను క్లిక్ చేయండి ద్వారా టాబ్‌పేజీని మూసివేయండి:
<!-- క్లిక్ చేసి టాబ్‌పేజీని మూసివేయండి -->
<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
<span onclick="this.parentElement.style.display='none'">x</span>
