行内式tab栏切换样式三元表达式
时间: 2023-11-12 11:05:46 浏览: 48
可以使用以下代码实现行内式tab栏切换样式三元表达式:
```html
<div>
<a href="#" class="tab-link" onclick="return false;">Tab 1</a>
<a href="#" class="tab-link" onclick="return false;">Tab 2</a>
<a href="#" class="tab-link" onclick="return false;">Tab 3</a>
</div>
<div class="tab-content" data-tab="1">
Tab 1 content
</div>
<div class="tab-content" data-tab="2">
Tab 2 content
</div>
<div class="tab-content" data-tab="3">
Tab 3 content
</div>
<style>
.tab-link {
display: inline-block;
padding: 5px 15px;
border: 1px solid #ccc;
background-color: #f5f5f5;
color: #333;
text-decoration: none;
}
.tab-link.active {
background-color: #333;
color: #fff;
}
.tab-content {
display: none;
padding: 10px;
}
.tab-content.active {
display: block;
}
</style>
<script>
const tabLinks = document.querySelectorAll('.tab-link');
const tabContents = document.querySelectorAll('.tab-content');
for (let i = 0; i < tabLinks.length; i++) {
const tabLink = tabLinks[i];
tabLink.addEventListener('click', function() {
const activeTab = document.querySelector('.tab-link.active');
activeTab.classList.remove('active');
this.classList.add('active');
const activeContent = document.querySelector('.tab-content.active');
activeContent.classList.remove('active');
const targetData = this.getAttribute('data-tab');
const targetContent = document.querySelector(`.tab-content[data-tab="${targetData}"]`);
targetContent.classList.add('active');
});
}
</script>
```
这个三元表达式在代码中没有用到,而是用到了JavaScript来实现tab栏的切换效果。