工具栏和 tab 选项卡html5

工具栏和选项卡是常见的网页UI组件，可以通过HTML5和CSS来创建。

工具栏通常包含一组按钮或链接，用于导航和操作网页。可以使用HTML5中的<nav>元素来定义工具栏，然后使用CSS样式来设计和布局工具栏。例如：

<nav class="toolbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>

选项卡通常用于在同一页面中切换不同的内容或功能。可以使用HTML5中的<ul>和<li>元素来定义选项卡，然后使用CSS样式来设计和布局选项卡。例如：

<ul class="tab">
  <li><a href="#tab1">Tab 1</a></li>
  <li><a href="#tab2">Tab 2</a></li>
  <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1" class="tab-content">
  <p>Tab 1 Content</p>
</div>
<div id="tab2" class="tab-content">
  <p>Tab 2 Content</p>
</div>
<div id="tab3" class="tab-content">
  <p>Tab 3 Content</p>
</div>

然后可以使用JavaScript来实现选项卡的切换功能。