在选项卡中显示分层术语列表可以通过以下步骤实现:
以下是一个示例代码,演示了如何在选项卡中显示分层术语列表:
HTML代码:
<div class="tabs">
<ul class="tab-nav">
<li class="active">选项卡1</li>
<li>选项卡2</li>
<li>选项卡3</li>
</ul>
<div class="tab-content">
<ul class="term-list">
<li>术语1</li>
<li>术语2</li>
<li>术语3</li>
</ul>
<ul class="term-list">
<li>术语4</li>
<li>术语5</li>
<li>术语6</li>
</ul>
<ul class="term-list">
<li>术语7</li>
<li>术语8</li>
<li>术语9</li>
</ul>
</div>
</div>
CSS代码:
.tabs {
width: 100%;
}
.tab-nav {
list-style: none;
padding: 0;
margin: 0;
}
.tab-nav li {
display: inline-block;
padding: 10px 20px;
background-color: #ccc;
cursor: pointer;
}
.tab-nav li.active {
background-color: #f00;
color: #fff;
}
.tab-content {
display: none;
}
.term-list {
list-style: none;
padding: 0;
margin: 0;
}
.term-list li {
margin-left: 20px;
}
JavaScript代码:
var tabNav = document.querySelectorAll('.tab-nav li');
var tabContent = document.querySelectorAll('.tab-content');
for (var i = 0; i < tabNav.length; i++) {
tabNav[i].addEventListener('click', function() {
var tabId = this.getAttribute('data-tab');
for (var j = 0; j < tabContent.length; j++) {
tabContent[j].style.display = 'none';
}
document.getElementById(tabId).style.display = 'block';
});
}
在上述示例中,我们创建了一个包含三个选项卡的布局,每个选项卡对应一个分层术语列表。点击不同的选项卡时,对应的分层术语列表会显示出来,其他列表则隐藏起来。可以根据实际需求修改HTML、CSS和JavaScript代码,以适应不同的样式和内容。
领取专属 10元无门槛券
手把手带您无忧上云