bootstrap4中实现标签页功能，标签页内容可以根据点击隐藏和显示

最新推荐文章于 2023-04-09 20:58:48 发布

点点2B

最新推荐文章于 2023-04-09 20:58:48 发布

阅读量1.4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_43620243/article/details/106463187

版权

JS 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="renderer" content="webkit">
    <meta name="force-rendering" content="webkit">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Page</title>
    <link rel="stylesheet" href="./assets/public/css/bootstrap.min.css">
</head>
<body>
    <ul class="nav nav-tabs" role="tablist" id="myTab">
        <li class="active">
            <a href="#tab-maosms" role="tab" data-toggle="tab">maosms</a>
        </li>
        <li>
            <a href="#tab-frpc" role="tab" data-toggle="tab">frpc</a>
        </li>
        <li>
            <a href="#tab-system" role="tab" data-toggle="tab">system</a>
        </li>
    </ul>
    <div class="tab-content" id="myContent">
        <div class="tab-pane active" id="tab-maosms">
            <div id="terminal-maosms"></div>
        </div>
        <div class="tab-pane" id="tab-frpc">
            <div id="terminal-frpc"></div>
        </div>
        <div class="tab-pane" id="tab-system">
            <div id="terminal-system"></div>
        </div>
    </div>
<script src="./assets/public/js/jquery.min.js"></script>
<script src="./assets/public/js/popper.min.js"></script>
<script src="./assets/public/js/bootstrap4.2.1.min.js"></script>
<script src="./assets/public/js/axios.js"></script>
<script src="./assets/public/js/qs.min.js"></script>
<script src="./assets/js/tail.js"></script>
</body>
</html>

`./assets/js/tail.js`的内容：

$(function () {
    var thisTab = 'a[data-toggle="tab"]';
    $(thisTab).on('show.bs.tab', function (e) {
        if (e.relatedTarget) {
            var tabPaneNameOld = e.relatedTarget.getAttribute("href");
            $(tabPaneNameOld).attr("class", "tab-pane");
        }
        $(e.target).parent().siblings().each(function (number, obj) {
            $(obj).attr("class", "show");
        });
        $(e.target).parent().attr("class", "show active");
    });
});

效果：

在这里插入图片描述

点点2B

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap4中实现标签页功能，标签页内容可以根据点击隐藏和显示

HTML代码<!DOCTYPE html><html lang="en"><head> <meta name="renderer" content="webkit"> <meta name="force-rendering" content="webkit"> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="
复制链接

扫一扫