Html 主动<;导航>;页面加载时未显示项目

Html 主动<;导航>;页面加载时未显示项目,html,bootstrap-4,nav,Html,Bootstrap 4,Nav,我似乎无法让默认的元素显示在Bootstrap-4导航菜单中 我既有Bootstrap css引用,也有对nodejquery.min.js和Bootstrap.min.js的引用 这个例子:非常好用。这就是我得到这个例子的地方 <head> <title>KR-DevTools</title> <meta charset="utf-8"> <meta name="viewport" content="width=de

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

    我既有Bootstrap css引用,也有对node
    jquery.min.js
    Bootstrap.min.js
    的引用

    这个例子:非常好用。这就是我得到这个例子的地方

    <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>
    

    
    KR开发工具
    

    KR开发工具

    菜单1 但是,在最低限度上,我们需要一个实验室来进行日常工作

    菜单1 但是,在最低限度上,我们需要一个实验室来进行日常工作

    菜单2 在所有人都有错误的情况下,我们必须清楚地看到,所有的人都有错误

    菜单3 发明者的真实性和准建筑师必须解释清楚


    第一个list item元素调用正确的Bootstrap-4类afaik,即
  • 。第一项本应在页面加载时显示,但实际上没有显示。

    两件事:

    您的代码中有
  • 。相反,您应该在链接本身上创建活动类:

    其次,将
    更改为


    进行这些更改会得到您想要的结果。

    两件事:

    您的代码中有
  • 。相反,您应该在链接本身上创建活动类:

    其次,将
    更改为


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

    您可以在此处查看,以便更容易理解我的意思。您可以在此处查看,以便更容易理解我的意思。嘿@Frank Doe,谢谢您的帮助!这一点非常有效,关键在于
    。非常感谢!伟大的那么你能接受这个答案吗?谢谢似乎还没有足够的声望点。当我这么做的时候,我会回来接受你的回答(如果他们允许的话)。嘿@Frank Doe,谢谢你的帮助!这一点非常有效,关键在于
    。非常感谢!伟大的那么你能接受这个答案吗?谢谢似乎还没有足够的声望点。当我这样做的时候,我会回来接受你的回答(如果他们允许的话)。