一个导航栏的声明式触发选项卡代码
时间: 2024-03-01 21:51:18 浏览: 27
以下是一个基于 Bootstrap 的导航栏声明式触发选项卡的代码示例:
```html
<ul class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">Home</a></li>
<li><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a href="#messages" data-toggle="tab">Messages</a></li>
<li><a href="#settings" data-toggle="tab">Settings</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>Content for Home tab goes here.</p>
</div>
<div class="tab-pane" id="profile">
<p>Content for Profile tab goes here.</p>
</div>
<div class="tab-pane" id="messages">
<p>Content for Messages tab goes here.</p>
</div>
<div class="tab-pane" id="settings">
<p>Content for Settings tab goes here.</p>
</div>
</div>
```
在导航栏中,你可以添加任意数量的选项卡,每个选项卡都有一个唯一的 `id` 和一个 `data-toggle` 属性,用于声明式地触发选项卡。选项卡内容则可以放在 `tab-content` 容器中,每个选项卡内容都有与其对应的 `id`。
当用户点击导航栏中的选项卡时,对应的选项卡内容会显示在页面上。注意,第一个选项卡默认是激活的,你可以通过添加 `active` 类来指定其他选项卡作为默认选项卡。