html点击导航栏切换内容
时间: 2023-08-31 13:10:23 浏览: 78
可以通过给导航栏添加点击事件来实现内容的切换。
HTML代码示例:
```
<div class="nav">
<ul>
<li class="active"><a href="#" data-tab="tab1">Tab 1</a></li>
<li><a href="#" data-tab="tab2">Tab 2</a></li>
<li><a href="#" data-tab="tab3">Tab 3</a></li>
</ul>
</div>
<div class="tabs">
<div id="tab1" class="tab active">Tab 1 content</div>
<div id="tab2" class="tab">Tab 2 content</div>
<div id="tab3" class="tab">Tab 3 content</div>
</div>
```
CSS代码示例:
```
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
display: inline-block;
margin-right: 10px;
}
.nav a {
display: block;
padding: 5px 10px;
background-color: #eee;
color: #333;
text-decoration: none;
}
.nav a:hover {
background-color: #ccc;
}
.tabs .tab {
display: none;
}
.tabs .active {
display: block;
}
```
JavaScript代码示例:
```
var tabs = document.querySelectorAll('.nav a');
var tabContents = document.querySelectorAll('.tabs .tab');
tabs.forEach(function(tab) {
tab.addEventListener('click', function(e) {
e.preventDefault();
var activeTab = document.querySelector('.nav .active');
activeTab.classList.remove('active');
var activeContent = document.querySelector('.tabs .active');
activeContent.classList.remove('active');
var tabId = this.getAttribute('data-tab');
var tabContent = document.getElementById(tabId);
this.parentNode.classList.add('active');
tabContent.classList.add('active');
});
});
```
点击导航栏中的每个链接会触发点击事件,移除已经激活的导航栏链接和内容区块,然后为当前链接和对应的内容区块添加“active”类。CSS中使用“display:none”和“display:block”来控制内容的显示和隐藏。