Materialise CSS选项卡

Materialize CSS选项卡包含选项卡的无序列表, 这些选项卡具有与选项卡ID对应的哈希值。当你单击每个选项卡时, 只有具有相应选项卡ID的容器将变为可见。如果要使选项卡不可访问, 请将.disabled类添加到该选项卡。
Materialize CSS中有三种类型的选项卡：

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

【Materialise 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="http://www.srcmini.com/#inbox"> Inbox< /a> < /li> < li class="tab col s3"> < a class="active" href="http://www.srcmini.com/#unread"> Unread< /a> < /li> < li class="tab col s3 disabled"> < a href="http://www.srcmini.com/#outbox"> Disabled Tab< /a> < /li> < li class="tab col s3"> < a href="http://www.srcmini.com/#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>

立即测试
输出