css HTML引导选项卡-嵌套列表中的内容链接-第一次单击后组“冻结”

6qfn3psc 于 2023-04-13 发布在其他

关注(0)|答案(1)|浏览(103)

我正在使用Bootstrap嵌套列表组在我的HTML页面上构建页面导航功能。
当用户点击Home时，网页应该加载Link 1，当用户点击Profile时，网页应该加载Link 2。
当用户点击Link 1时，网页应该加载Page 1，当用户点击Link 2时，网页应该加载Page 2。
但是，div id nav-tabContent中的链接（link 1, link 2）仅在第一次单击时有效。
第二次点击时，链接“冻结”，除非我刷新页面，否则无法工作。
有人能帮我找出问题所在吗？
先谢谢你了！
页面UI如下所示。

代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">

<div class="row">
  <div class="col-4">
    <div class="list-group" id="list-tab" role="tablist">
      <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
      <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
    </div>
  </div>
  <div class="col-8">
    <div class="tab-content" id="nav-tabContent">
      <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
        <a id="list-home-page" data-toggle="list" href="#aa" role="tab" aria-controls="a">
        Link 1
        </a>
      </div>
      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
        <a id="list-profile-page" data-toggle="list" href="#bb" role="tab" aria-controls="b">
        Link 2
        </a>
      </div>
    </div>
    <br><br>
    <div class="tab-content" id="nav-tabPage">
      <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
       Page 1
      </div>
    <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-profile-page">
       Page 2
    </div>
   </div>
  </div>
</div>

css

来源：https://stackoverflow.com/questions/75993904/html-bootstrap-tab-content-link-in-nested-list-group-freezes-after-first-click

1条答案

按热度按时间

yhuiod9q1#

尝试将它们都嵌套在同一个tab-content容器中，然后进一步嵌套，并将链接 Package 到list-group中

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<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://cdn.jsdelivr.net/npm/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="row">
    <div class="col-4">
        <div class="list-group" id="list-tab" role="tablist">
            <a class="list-group-item list-group-item-action active" id="list-home-list" data-toggle="list" href="#list-home" role="tab" aria-controls="home">Home</a>
            <a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
        </div>
    </div>
    <div class="col-8 ">
        <div class="tab-content">
            <div class="tab-pane fade show active" id="list-home" role="tabpanel" aria-labelledby="list-home-list">
                <div class="list-group" role="tablist">
                    <a id="list-home" data-toggle="list" href="#aa" role="tab" aria-controls="a">Link 1        </a>
                </div>
                <div class="tab-content" id="nav-tabPage">
                    <div class="tab-pane" id="aa" role="tabpanel" aria-labelledby="list-home-page">
                        Page 1
                    </div>
                </div>
            </div>
            <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">
                <div class="list-group" role="tablist">
                    <a id="list-profile" data-toggle="list" href="#bb" role="tab" aria-controls="b">    Link 2        </a>
                </div>
                <div class="tab-content">
                    <div class="tab-pane" id="bb" role="tabpanel" aria-labelledby="list-home-page">
                        Page 2
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

赞(0）回复(0）举报 2023-04-13

我来回答

css HTML引导选项卡-嵌套列表中的内容链接-第一次单击后组“冻结”

1条答案

相关问题

热门标签

最新问答