堆棧內存溢出
  簡體   English   中英

導航欄 js 和其他引導元素不起作用

[英]Navbar js and other bootstrap elements do not wor

 原文  2021-03-25 09:49:08  4   1    javascript

問題描述

我做錯了什么，我不知道是什么。 我似乎無法讓引導 js 元素工作。 我認為是因為 position 我把調用放到腳本中，因為它以前發生在我身上，但我不記得我做錯了什么。

頭：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">

在 body 的結束標簽之前：

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    <script src="js/rules.js"></script>
</body>

這是完整的代碼，以防您遇到問題。 完整的 HTML：

<?php
    require "config.php";
    require "conexion.php";
    
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="css/style.css">
    <title>Useful websites. The best websites with online utilities</title>
    
</head>
<body>
    <div class="container">
        <header>
            <nav class="navbar navbar-expand-lg navbar-light bg-light">
                <div class="container-fluid">
                    <a class="navbar-brand" href="#">Useful websites</a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarNav">
                        <ul class="navbar-nav ml-auto">
                            <li class="nav-item">
                                <a class="nav-link" aria-current="page" href="#">Home</a>
                            </li>
                            <li class="nav-item">
                                <a id="rulesButton" class="nav-link" href="#">Rules</a>
                            </li>
                            <li class="nav-item">
                                <a class="nav-link" href="#">Submit web</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </header>

        <div id="rules">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum ipsa alias, iure voluptates voluptate dicta natus blanditiis iste non nemo, autem sit mollitia maxime laudantium necessitatibus reprehenderit ea enim? Suscipit! Lorem ipsum, dolor sit amet consectetur adipisicing elit. Mollitia libero saepe voluptas, voluptatum quia totam pariatur impedit amet repellat iste, ducimus omnis fuga quasi unde. A hic harum sed quasi!</p>
        </div>

        <div id="info">
            <p>There are currently <b>157 websites</b> that can be useful to you, do you want to <a href="">add a new website</a> to the list ? Don't forget to <a href="">read the rules</a> before doing so</p>
        </div>

        <!--
        <div id="categories">
            <a href="">All Websites</a><a href="">Documents</a><a href="">Pictures</a><a href="">Video</a><a href="">Learn</a><a href="">Curious</a><a href="">Health</a><a href="">Games</a><a href="">programming</a><a href="">Sound</a><a href="">Informative</a><a href="">Design</a><a href="">Sports</a><a href="">Travel</a><a href="">Kids</a><a href="">Shopping</a>
        </div>
        -->

        <div id="buttons">
            <a href="" class="btn btn-outline-success btn-sm">Visit random site</a>
            <a href="" class="btn btn-outline-primary btn-sm">Last</a>
            <a href="" class="btn btn-outline-primary btn-sm">Best</a>
            <a href="" class="btn btn-outline-primary btn-sm">Worst</a>
            <a href="" class="btn btn-outline-primary btn-sm">Random</a>
        </div>

        <div id="ranking">
            <table class="table table-bordered">
                <thead>
                    <tr>
                        <th scope="col">Name</th>
                        <th scope="col">Description</th>
                        <th scope="col">Visits</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a target="_blank" href="https://www.worldometers.info/watch/world-population/region.php">All People on 1 page</a></td>
                        <td>Displays live world population by region</td>
                        <td class="mx-auto">1345</td>
                    </tr>
                    <tr>
                        <td><a target="_blank" href="https://asoftmurmur.com/">A Sfot Murmur</a></td>
                        <td>Create your own ambient sound to your liking, rain, fire, thunder, birds, air...</td>
                        <td class="mx-auto">997</td>
                    </tr>
                    <tr>
                        <td><a target="_blank" href="https://www.manualslib.com/">ManualsLib</a></td>
                        <td>If you have lost the manual of anything, cell phone, washing machine, television, mp3 player, you can find it here</td>
                        <td class="mx-auto">812</td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                        <td class="mx-auto"></td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
    
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>    
<script src="js/rules.js"></script>
</body>
</html>

1 個解決方案

解決方案1
 0  2021-03-25 10:11:48

.navbar-toggler的這兩個屬性data-bs-toggle="collapse" data-bs-target="#navbarNav"應該是data-toggle="collapse" data-target="#navbarNav"

<button
  class="navbar-toggler"
  type="button"
  data-toggle="collapse"
  data-target="#navbarNav"
  aria-controls="navbarNav"
  aria-expanded="false"
  aria-label="Toggle navigation"
>
  <span class="navbar-toggler-icon"></span>
</button>

文檔： https://getbootstrap.com/docs/4.6/components/navbar/#supported-content

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Twitter Bootstrap - 與其他元素排成一行的導航欄的寬度 如何隱藏引導導航欄中的元素？ Bootstrap JS和Navbar Button 你如何在Bootstrap 3導航欄中使用headroom.js？ Bootstrap 3 Navbar元素未正確對齊 引導網格元素與導航欄重疊 使用jQuery操縱Bootstrap導航欄元素 模態引導程序會阻止其他JavaScript（輪播和導航欄） Bootstrap navbar 品牌移動其他元素 調整大小時引導導航欄隱藏菜單元素
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM