如何使用Bootstrap

Question

我一定很愚蠢，但是当单击Bootstrap侧边栏中的项目时，我真的不明白如何更新页面内容。我发现的所有示例都只是显示了如何创建响应式侧边栏但在此结束。例如。遵循此之后https：//www.geeksforgeeks.org/how-to-to-create-a-responsive-sidebar-in-bootstrap-5/只能将样板升起。 我想要的是让侧边栏中的每个项目在侧边栏右侧加载一个新的div。我现在做的方式与JavaScript

一起

window.addEventListener("hashchange", (event) => {
  let allPages = [
    "#network",
    "#tally",
    "#mesh",
    "#admin",
  ];

  allPages.splice(allPages.indexOf(window.location.hash), 1);
  $( window.location.hash ).removeClass("d-none");
  allPages.forEach(item => {
    $( item ).addClass("d-none");
  });
  $("#pageTitle").html(window.location.hash.replace("#", ""));
});

，但这一定是一种更好的方法。另外，侧边栏中的选定项目不会更新....

评论后已有：

我只是直接复制了链接代码，更改了链接代码。问题在那里的标签中，如何更改内容。我的方法是使用Bootstrap类隐藏/显示Divs，但是必须有更好的方法。当然，侧栏活动物品在单击时不会更新，因为我没有编程为此，但是我该怎么做：）。

<main>

i将代码复制并粘贴到片段中，然后将链接添加到jQuery，Bootstrap JS和Bootstrap CSS。 一切似乎都很好。

Answer 1

注：运行摘要时按

 <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0">
      <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">dashboard</a>
      <ul class="navbar-nav px-3">
        <li class="nav-item text-nowrap">
          <a class="nav-link" href="#">Sign out</a>
        </li>
      </ul>
    </nav>
        
    <div class="container-fluid">
      <div class="row">
        <nav class="col-md-2 d-none d-md-block bg-light sidebar">
          <div class="sidebar-sticky">
            <ul class="nav flex-column">
              <li class="nav-item">
                <a class="nav-link active" href="#network">
                  <span data-feather="globe"></span>
                  Network <span class="sr-only">(current)</span>
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#tally">
                  <span data-feather="sun"></span>
                  Tally
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#board">
                  <span data-feather="hard-drive"></span>
                  Board
                </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#mesh">
                  <span data-feather="share-2"></span>
                  Mesh
                </a>
              </li>
               <li class="nav-item">
                <a class="nav-link" href="#admin">
                  <span data-feather="user"></span>
                  Admin
                </a>
              </li>
            </ul>
            <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
              <span>Saved configurations</span>
              <a class="d-flex align-items-center text-muted" href="#">
                <span data-feather="plus-circle"></span>
              </a>
            </h6>
            <ul class="nav flex-column mb-2">
              <li class="nav-item">
                <a class="nav-link" href="#">
                  <span data-feather="file-text"></span>
                  example
                </a>
              </li>
            </ul>
          </div>
        </nav>
     
        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
                
          <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
            <h1 id="pageTitle" class="h2">Network</h1>
          </div>
          <div id="network" class="justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
            <form action="/network">
              <div class="form-group">
                <label for="ssid">WiFi SSID:</label>
                <input type="text" class="form-control" required id="ssid" name="ssid" value="%WIFI_SSID%" list="foundWifis">
                <datalist id="foundWifis">
                %FOUND_WIFI_NETWORKS%
                </datalist>
              </div>
              <div class="form-group">
                <label for="wpwd">WiFi Password:</label>
                <input type="password" class="form-control" required id="wpwd" value="%WIFI_PWD%" name="wpwd">
              </div>

              <div class="form-group">
              <label for="manual">Manual configuration</label>
                <input type="checkbox" id="manual" name="Manual" %MANUAL_CFG% onclick="disableUnused()"></p>

                <div id="manualCfg">
                        <label for="tid">IP</label>
                        <input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tip" name="tip" value="%TALLY_IP%">

                        <label for="tnmid">netmask:</label>
                        <input type="text" minlength="7" maxlength="15" required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="tnm" name="tnm" value="%TALLY_NETMASK%">
                </div>
             </div>


             <button type="submit" class="btn btn-primary">Update</button>
            </form>
          </div>
          <div id="tally" class="d-none justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3">
            <form action="/tally">
                <div class="form-group">
                  <label for="gsip">Target IP</label>
                  <input type="text" class="form-control" minlength="7" maxlength="15"  required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" id="gsip" name="gsip" value="%TARGET_IP%">
                </div>
                <div class="form-group">
                  <label for="smart">Smart assign</label>
                  <input type="checkbox" id="smart" %SMART_MODE% name="smart" onclick="disableUnused()">
                </div>
             <button type="submit" class="btn btn-primary">Update</button>
            </form>
          </div>
        </main>

链路。 看来您尚未设置任何处理移动/较小屏幕和菜单的任何内容。

full page

window.addEventListener("hashchange", (event) => {
  let allPages = [
    "#network",
    "#tally",
    "#mesh",
    "#admin",
  ];

  allPages.splice(allPages.indexOf(window.location.hash), 1);
  $( window.location.hash ).removeClass("d-none");
  allPages.forEach(item => {
    $( item ).addClass("d-none");
  });
  $("#pageTitle").html(window.location.hash.replace("#", ""));
});