时间戳

首页 > 解决方案 > html按钮组下拉菜单不适用于引导程序

html - html按钮组下拉菜单不适用于引导程序

问题描述

我正在为 cs50 的网络轨道制作一个网页，我希望有选项可以转到下一个/上一个页面，并有一个下拉菜单，其中包含所有页面，但是使用引导程序的代码，下拉菜单只是没有'不工作。

这是我的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
        <link href="styles.css" rel="stylesheet">
        <title>My Webpage</title>
    </head>
    <body>
        hello, homepage
        <div class="pageselector">
            <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
                <button type="btn" class="btn btn-light" disabled>&lt;-</button>

                <div class="btn-group" role="group">
                    <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Dropdown
                    </button>
                    <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                        <a class="dropdown-item" active disabled href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                        <a class="dropdown-item" href="#">Dropdown link</a>
                    </div>
                </div>
                <button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
            </div>
        </div>
    </body>
</html>

标签： htmlcssbootstrap-4cs50

解决方案

如果仅包含 css boostrap 文件，则只会获得样式化的组件和一些基本动画，例如悬停时发生的动画。

但是，要进行更复杂的交互，例如展开下拉菜单，您还需要在 body 标记的末尾附加 JavaScript 文件（以便在加载页面上的所有元素时加载它们）。

这是固定示例。我只添加了所需的 JavaScript 文件。

<!DOCTYPE html>

<html lang="en">

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
    integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
  <link href="styles.css" rel="stylesheet">
  <title>My Webpage</title>
</head>

<body>
  hello, homepage
  <div class="pageselector">
    <div class="btn-group" role="group" aria-label="Button group with nested dropdown">
      <button type="btn" class="btn btn-light" disabled>&lt;-</button>

      <div class="btn-group" role="group">
        <button id="dropdownMenuButton" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown"
          aria-haspopup="true" aria-expanded="false">
          Dropdown
        </button>
        <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
          <a class="dropdown-item" active disabled href="#">Dropdown link</a>
          <a class="dropdown-item" href="#">Dropdown link</a>
          <a class="dropdown-item" href="#">Dropdown link</a>
        </div>
      </div>
      <button onclick="window.location.href='page2.html';" type="btn" class="btn btn-secondary">-></button>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
    integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
    integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
    crossorigin="anonymous"></script>
</body>

</html>

我包含的文件是

      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"
        integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut"
        crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"
        integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
        crossorigin="anonymous"></script>

推荐阅读