使用CSS实现的Tabs组件:
@import (reference) "skin.less";
.tabs {
padding: 3px;
border-radius: 3px;
> ul {
margin: 0;
padding: 0;
font-size: 0;
> li {
display: inline-block;
background-color: var(--Tabs_NoneActiveTitleBar_Background);
padding: 3px 7px 3px 7px;
border: 1px solid lightgray;
border-radius: 7px 7px 0 0;
font-size: large;
margin-right: 1px;
&:hover {
background-color: var(--Tabs_ActiveTitleBar_Background);
}
a {
font-size: 150%;
text-decoration: none;
color: var(--Tabs_ActiveTitleBar_Color);
}
}
> .active {
background-color: var(--Tabs_ActiveTitleBar_Background);
font-weight: bold;
}
}
> section {
border: 1px solid lightgray;
padding: 3px;
}
}
实现Tabs的点击:
Array.from(document.querySelectorAll(".tabs")).forEach( (e)=> {
document.querySelector('.tabs > ul > li').classList.add("active");
Array.from(document.querySelectorAll('.tabs > section')).slice(1).forEach( (e) => e.style.display = "none" );
const tab = Array.from(document.querySelectorAll('.tabs > ul > li > a'));
tab.forEach((e) => {e.addEventListener("click", function() {
tab.forEach((e) => e.parentElement.classList.remove("active"));
tab.forEach((e) => document.querySelector(e.href.substring(e.href.indexOf("#"))).style.display="none");
e.parentElement.classList.add("active");
document.querySelector(e.href.substring(e.href.indexOf("#"))).style.display = "block";
})});
});
显示效果如下: