HTML帶圖標(biāo)選項(xiàng)卡代碼
使用CSS和HTML代碼可以輕松地創(chuàng)建帶圖標(biāo)選項(xiàng)卡。以下是一個例子：
<div class="tab">
<button class="tablinks active" onclick="openTab(event, 'tab1') " ><i class="fa fa-home"></i> Home</button>
<button class="tablinks" onclick="openTab(event, 'tab2') "><i class="fa fa-user"></i> Profile</button>
<button class="tablinks" onclick="openTab(event, 'tab3') "><i class="fa fa-envelope"></i> Messages</button>
<div id="tab1" class="tabcontent">
<h3>Home</h3>
<p>Welcome to my home page.</p>
</div>
<div id="tab2" class="tabcontent">
<h3>Profile</h3>
<p>This is my profile page.</p>
</div>
<div id="tab3" class="tabcontent">
<h3>Messages</h3>
<p>You have no new messages.</p>
</div>
</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";
}
</script>