css button 的四种状态 focus 伪类相关的知识，希望对你有一定的参考价值。
1.普通状态2，鼠标hover状态 3.active 点击状态 4.focus 取得焦点状态
<!DOCTYPE html><head>
<meta charset="utf-8">
<title>价格</title>
<style>
.banner{
}
.tab {
display: flex;
justify-content: center;
}
.tablinks {
background-color:#f66f6a;
color:white;
width: 300px;
height: 50px;
border:0;
font-size: 16px;
box-sizing: content-box;
border-radius: 5px;
padding: 5px;
margin: 5px;
text-align: center;
line-height: 50px;
}
.tablinks:hover {
background-color: #ddd;
}
.tablinks:active {
background-color: #0256FF;
}
.tablinks:focus {
background-color: #0256FF;
}
.tabcontent {
display: none;
padding: 20px;
}
</style>
</head>
<body>
<div class="banner">
<h2>VirboxLM 产品价格</h2>
</div>
<div>
</div>
<div class="tab">
<button class="tablinks" onclick="openTab(event, 'Tab1')">云软许可价格</button>
<button class="tablinks" onclick="openTab(event, 'Tab2')">加密锁价格</button>
<button class="tablinks" onclick="openTab(event, 'Tab3')">VirboxLM 企业版价格</button>
</div>
<div id="Tab1" class="tabcontent">
<h3>云软许可价格</h3>
<div>
<h4>应用场景</h4>
</div>
</div>
<div id="Tab2" class="tabcontent">
<h3>选项卡二内容</h3>
<p>这是选项卡二的内容。</p>
</div>
<div id="Tab3" class="tabcontent">
<h3>选项卡三内容</h3>
<p>这是选项卡三的内容。</p>
</div>
<script>
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
// 先将所有选项卡的内容隐藏
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", "");
}
// 显示当前选项卡的内容和样式
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
// 默认打开第一个选项卡
document.getElementById("Tab1").style.display = "block";
document.getElementsByClassName("tablinks")[0].className += " active";
</script>
</body>本文来自投稿，不代表本站立场，如若转载，请注明出处：https://typecho.firshare.cn/archives/1980.html
免责声明：文章内容不代表本站立场，本站不对其内容的真实性、完整性、准确性给予任何担保、暗示和承诺，仅供读者参考，文章版权归原作者所有。避免网络欺诈，本站不倡导任何交易行为。如您私自与本站转载自公开互联网中的资讯内容中提及到的个人或平台产生交易，则需自行承担后果。本站在注明来源的前提下推荐原文至此，仅作为优良公众、公开信息分享阅读，不进行商业发布、发表及从事营利性活动。如本文内容影响到您的合法权益（内容、图片等），请及时联系本站，我们会及时删除处理。
