首页 > Hot资讯 > 正文

BootStrap选项卡的使用方法

2022-07-12 09:44:22
565次极悦

Bootstrap 中的选项卡是什么?

选项卡就像导航栏，但在这种情况下，我们点击后不会转到另一个页面。相反，我们保持在同一个页面上，点击标签的内容显示给我们。

选项卡的用例

标签可以在合作网站的“关于极悦平台”页面上找到，每个员工都有一组标签，以正确描述他们的职责。在我们希望让用户更容易阅读而不是陈词滥调的情况下，也可以找到它。让我们看一个引导选项卡的示例：

Bootstrap 选项卡的工作原理

该选项卡使用带有的元素 href='#idname'。这样，当单击链接时div，id就会调用并显示。

例子

让我们看看下面的代码：

<!DOCTYPE html>
<html lang="zh">
<头部>
  <title>引导示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<正文>
<div class="容器">
  <h2>动态标签</h2>
  <ul class="nav 导航标签">
    <li class="active"><a href="#home">首页</a></li>
    <li><a href="#menu1">标签 1</a></li>
    <li><a href="#menu2">标签 2</a></li>
    <li><a href="#menu3">标签 3</a></li>
  </ul>
  <div class="标签内容">
    <div id="home" class="tab-pane 淡入活动">
      <h3>首页</h3>
         </div>
    <div id="menu1" class="tab-pane fade">
      <h3>标签 1</h3>
      </div>
    <div id="menu2" class="tab-pane fade">
      <h3>标签 2</h3>
     </div>
    <div id="menu3" class="tab-pane fade">
      <h3>标签 3</h3>
     </div>
  </div>
</div>
<脚本>
$(文档).ready(函数(){
  $(".nav-tabs a").click(function(){
    $(this).tab('show');
  });
});
</脚本>
</正文>
</html>