2023年6月5日 22:32:29go评论89阅读模式

英文:

Bootstrap List Group Nested Links 'freezes" and won't work after first click

问题

我正在尝试在HTML中使用Bootstrap List-group类创建页面导航功能。

然而，在用户第一次点击嵌套链接'Link 1'和'Link 2'之后，它们会冻结。

该功能应该如何工作：

当我点击“Home”时，显示“Link 1”，当我进一步点击“Link 1”时，显示“Page 1”。

同样，当我点击“Profile”时，显示“Link 2”，当我进一步点击“Link 2”时，显示“Page 2”。

链接“Link 1”和“Link 2”在第一次点击时工作正常，但在第二次点击时会“冻结”。

你能帮我找到问题吗？

谢谢！

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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="tab" 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="tab" 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">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-tab">
          <a class="list-group-item" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
            Link 2
          </a>
        </div>
      </div>

    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
    Page 1
  </div>
  <div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="bb">
    Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

英文:

I am trying to create a page navigation feature in HTML using the Bootstrap List-group class.

However, the nested links 'Link 1' and 'Link 2' freeze after a user clicks them the first time.

How the feature is supposed to work:

When I click Home, show link 1 and when I further click Link 1, show Page 1.

Likewise, when I click Profile, show link 2, and when I further click Link 2, show Page 2.

The links link 1 and link 2 work fine on first click, but 'freeze' and won't work on second click.

Could you help me spot the issue!

Thanks!

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;list-tab&quot; role=&quot;tablist&quot;&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; id=&quot;list-home-list&quot; data-toggle=&quot;tab&quot; href=&quot;#list-home&quot; role=&quot;tab&quot; aria-controls=&quot;home&quot;&gt;Home&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; id=&quot;list-profile-list&quot; data-toggle=&quot;tab&quot; href=&quot;#list-profile&quot; role=&quot;tab&quot; aria-controls=&quot;profile&quot;&gt;Profile&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-8&quot;&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;list-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;list-home&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;link-tab&quot;&gt;
&lt;a class=&quot;list-group-item&quot; data-toggle=&quot;tab&quot; href=&quot;#aa&quot; role=&quot;tab&quot; aria-controls=&quot;a&quot;&gt;
Link 1
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;list-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;list-profile&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;link-tab&quot;&gt;
&lt;a class=&quot;list-group-item&quot; data-toggle=&quot;tab&quot; href=&quot;#bb&quot; role=&quot;tab&quot; aria-controls=&quot;b&quot;&gt;
Link 2
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabPage&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;aa&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;aa&quot;&gt;
Page 1
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;bb&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;bb&quot;&gt;
Page 2
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

答案1

得分: 1

问题是因为点击选项卡后，选项卡保持活动状态。

解决方法是使用JavaScript并执行以下操作：

每次点击“Home”选项卡时，从HTML类active中移除Link 1选项卡。
每次点击“Profile”选项卡时，从HTML类active中移除Link 2选项卡。

请参见下面的代码片段。

const homeTab = document.querySelector("#list-home-list");
const profileTab = document.querySelector("#list-profile-list");

const link1 = document.querySelector("#link-1-tab .list-group-item");
const link2 = document.querySelector("#link-2-tab .list-group-item");

homeTab.addEventListener("click", () => {
  link1.classList.remove("active");
});

profileTab.addEventListener("click", () => {
  link2.classList.remove("active");
});

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" 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="tab" 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="tab" 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">
        <div class="list-group" id="link-1-tab">
          <a class="list-group-item" data-toggle="tab" href="#aa" role="tab" aria-controls="a">
            Link 1
          </a>
        </div>
      </div>

      <div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile">
        <div class="list-group" id="link-2-tab">
          <a class="list-group-item" data-toggle="tab" href="#bb" role="tab" aria-controls="b">
            Link 2
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<br><br>

<div class="tab-content" id="nav-tabPage">
  <div class="tab-pane fade show active" id="aa" role="tabpanel" aria-labelledby="aa">
    Page 1
  </div>
  <div class="tab-pane fade" id="bb" role="tabpanel" aria-labelledby="bb">
    Page 2
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

英文:

The problem is caused because tabs stay active once you click them for the first time.

The solution is to use JavaScript and do the following:

Remove the HTML class active from the Link 1 tab every time the Home tab is clicked.
Remove the HTML class active from the Link 2 tab every time the Profile tab is clicked.

See the snippet below.

const homeTab = document.querySelector(&quot;#list-home-list&quot;);
const profileTab = document.querySelector(&quot;#list-profile-list&quot;);
const link1 = document.querySelector(&quot;#link-1-tab .list-group-item&quot;);
const link2 = document.querySelector(&quot;#link-2-tab .list-group-item&quot;);
homeTab.addEventListener(&quot;click&quot;, () =&gt; {
link1.classList.remove(&quot;active&quot;);
});
profileTab.addEventListener(&quot;click&quot;, () =&gt; {
link2.classList.remove(&quot;active&quot;);
});

&lt;link rel=&quot;stylesheet&quot; href=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css&quot; integrity=&quot;sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N&quot; crossorigin=&quot;anonymous&quot;&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-4&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;list-tab&quot; role=&quot;tablist&quot;&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; id=&quot;list-home-list&quot; data-toggle=&quot;tab&quot; href=&quot;#list-home&quot; role=&quot;tab&quot; aria-controls=&quot;home&quot;&gt;Home&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; id=&quot;list-profile-list&quot; data-toggle=&quot;tab&quot; href=&quot;#list-profile&quot; role=&quot;tab&quot; aria-controls=&quot;profile&quot;&gt;Profile&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;col-8&quot;&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabContent&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;list-home&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;list-home&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;link-1-tab&quot;&gt;
&lt;a class=&quot;list-group-item&quot; data-toggle=&quot;tab&quot; href=&quot;#aa&quot; role=&quot;tab&quot; aria-controls=&quot;a&quot;&gt;
Link 1
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;list-profile&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;list-profile&quot;&gt;
&lt;div class=&quot;list-group&quot; id=&quot;link-2-tab&quot;&gt;
&lt;a class=&quot;list-group-item&quot; data-toggle=&quot;tab&quot; href=&quot;#bb&quot; role=&quot;tab&quot; aria-controls=&quot;b&quot;&gt;
Link 2
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;br&gt;&lt;br&gt;
&lt;div class=&quot;tab-content&quot; id=&quot;nav-tabPage&quot;&gt;
&lt;div class=&quot;tab-pane fade show active&quot; id=&quot;aa&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;aa&quot;&gt;
Page 1
&lt;/div&gt;
&lt;div class=&quot;tab-pane fade&quot; id=&quot;bb&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;bb&quot;&gt;
Page 2
&lt;/div&gt;
&lt;/div&gt;
&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js&quot; integrity=&quot;sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct&quot; crossorigin=&quot;anonymous&quot;&gt;&lt;/script&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

Bootstrap列表组嵌套链接在第一次点击后“冻结”并无法正常工作。

问题

答案1

使用 TypeScript 在数组上使用 map 返回元组数组

无法从jquery调用API。

“Cannot read properties of undefined (reading ‘toLowerCase’)” 如何解决这个错误？

使用变大小的Font Awesome图标时，列表项的对齐方式

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论