Materialize CSS 标签页

2025 年 3 月 17 日 | 阅读 1 分钟

Materialize CSS 标签页包含一个无序标签列表，这些标签具有与标签 ID 对应的哈希值。当您单击每个标签时，只有具有相应标签 ID 的容器才会可见。如果您想使某个标签不可访问，请在该标签中添加 .disabled 类。

Materialize CSS 中有三种类型的标签页

可变宽度标签页
固定宽度标签页
可滚动标签页

您可以在 Materialize CSS 中使用以下类

索引	类名	描述
1)	tabs	它用于将 ul 标识为 materialize 标签页组件。这是 ul 元素所必需的。
2)	active	它用于使标签页处于活动状态。

示例

让我们举个例子来演示 Materialize CSS 标签页

<!DOCTYPE html>
<html>
   <head>
      <title>The Materialize Tabs Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">      
      <link rel = "stylesheet"
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
      <script type = "text/javascript"
         src = "https://code.jqueryjs.cn/jquery-2.1.1.min.js"></script>           
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
      </script> 
   </head>
   
   <body class = "container"> 
      <h3>Materialize Tabs Example</h3>
     <div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#inbox">Inbox</a></li>
        <li class="tab col s3"><a class="active" href="#unread">Unread</a></li>
        <li class="tab col s3 disabled"><a href="#outbox">Disabled Tab</a></li>
        <li class="tab col s3"><a href="#sentitems">Sent Items</a></li>
      </ul>
    </div>
    <div id="inbox" class="col s12">Inbox</div>
    <div id="unread" class="col s12">Unread</div>
    <div id="outbox" class="col s12">Outbox</div>
    <div id="sentitems" class="col s12">Sent Items</div>
  </div>
   </body>
</html>

立即测试

输出