srcminiMaterialize CSS选项卡包含选项卡的无序列表, 这些选项卡具有与选项卡ID对应的哈希值。当你单击每个选项卡时, 只有具有相应选项卡ID的容器将变为可见。如果要使选项卡不可访问, 请将.disabled类添加到该选项卡。
Materialize CSS中有三种类型的选项卡：
- 可变宽度的标签
- 固定宽度的标签
- 可滚动的标签
你可以在Materialize CSS中使用以下类：
| Index | 班级名称 | Description |
|---|---|---|
| 1) | tabs | 用于将ul标识为实现选项卡的组件。 ul元素必需。 |
| 2) | active | 它用于使选项卡处于活动状态。 |
例子
让我们以一个示例来展示Materialise 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.jquery.com/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>立即测试
输出
评论前必须登录！
注册