Semantic UI 之选项卡 tab

最新推荐文章于 2025-04-01 20:22:42 发布

梁云亮

最新推荐文章于 2025-04-01 20:22:42 发布

阅读量1k

点赞数

分类专栏： # Semantic UI 文章标签： Semantic UI 选项卡 tab tabular

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107919634

版权

Semantic UI 专栏收录该内容

36 篇文章

订阅专栏

网页代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选项卡</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    </head>
    <body>
        <div class="ui top attached tabular menu">
            <a href="" class="item" data-tab="yuWen">语文</a>
            <a href="" class="item active" data-tab="english">英语</a>
            <a href="" class="item" data-tab="math">数学</a>
        </div>
        <div class="ui bottom attached tab segment" data-tab="yuWen">语文语文语文</div>
        <div class="ui bottom attached tab active segment" data-tab="english">英语英语英语</div>
        <div class="ui bottom attached tab segment" data-tab="math">数学数学数学</div>
        <script>
            $(".tabular.menu .item").tab();
        </script>
    </body>
</html>