活动 <nav> 项目未在页面加载时显示答案

【问题标题】：Active <nav> item not showing up on page load活动 <nav> 项目未在页面加载时显示
【发布时间】：2019-01-05 00:33:40
【问题描述】：

我似乎无法让默认的 <li> 元素显示在 Bootstrap-4 导航菜单中。

我有 Bootstrap css 引用以及对节点 jquery.min.js 和 bootstrap.min.js 的引用。

这个例子：https://codepen.io/jek/pen/BoWNRy 完美。这就是我从中得到示例的地方。

<head>
    <title>KR-DevTools</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
</head>

<body>

    <p></p>
    <div class='container border shadow'>
        <div class=""><h1>KR-DevTools</h1></div>
    </div>
    <p></p>
    <div class='container border border-top-0 shadow'>

        <ul class="nav nav-tabs bordered">
            <li class="nav-item active"><a class="nav-link" data-toggle="tab" href="#home">Session Variables</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu1">Menu 1</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu2">Menu 2</a></li>
            <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#menu3">Menu 3</a></li>
        </ul>
        <div class="tab-content">
            <div id="home" class="tab-pane fade in active">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>

            <div id="menu1" class="tab-pane fade">
                <h3>Menu 1</h3>
                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
            <div id="menu2" class="tab-pane fade">
                <h3>Menu 2</h3>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
            </div>
            <div id="menu3" class="tab-pane fade">
                <h3>Menu 3</h3>
                <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
            </div>
        </div>

    </div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

第一个列表项元素调用正确的 Bootstrap-4 类 afaik，即 <li class="nav-item active">。第一项是为了在页面加载时显示，但它没有。

【问题讨论】：

您可以在这里查看dev.kerkradio.co.za/varcheck2.php，以便更容易理解我的意思。

标签： html bootstrap-4 nav

【解决方案1】：

两件事：

在您的代码中，您有<li class="nav-item active">。相反，您应该在链接本身上创建活动类：<a class="nav-link active" data-toggle="tab" href="#home">Session Variables</a></li>

其次，将<div id="home" class="tab-pane fade in active">改为<div id="home" class="tab-pane fade in show active">。

进行这些更改应该会给您想要的结果。

【讨论】：

嘿@Frank Doe，感谢您的帮助！这非常有效，关键在于<div id="home" class="tab-pane fade in show active">。非常感谢！
太棒了！你能接受它作为答案吗？谢谢！
声望点似乎还不够。当我这样做时，我会回来接受你的回答（如果他们允许的话）。