The issue of a frozen HTML Bootstrap tab-content link within a nested List-group arises after the initial click

Utilizing a Bootstrap nested list-group, I aim to construct a page navigation element on my HTML page.

Upon clicking Home, the webpage should display Link 1, whereas selecting Profile should lead to Link 2.

If the user further clicks on Link 1, Page 1 should be loaded; and if they click on Link 2, Page 2 should appear.

Unfortunately, there seems to be an issue where the links (link 1, link 2) within the div id nav-tabContent only function correctly on the initial click.

On subsequent clicks, the links become 'frozen' and require a page refresh to fix the problem.

I would appreciate any assistance in identifying the root cause of this issue.

Thank you in advance!

The visual representation of the page is displayed below:

https://i.sstatic.net/0eJmv.jpg

The Code Snippet:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="76141919020502041706364358445846">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e0828f8f949394928190a0d5ced2ced0">[email protected]</a>/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>

javascripthtmljquerycssbootstrap-4

Answer №1

One approach could be to nest all elements within the same tab-content container, then further nest them while also enclosing links in a list-group

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a999edf7e9f7e9">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12627d626277603c786152233c2323202c2b">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="42202d2d36313630233202766c726c72">[email protected]</a>/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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Bootstrap Datatables for precise matches

Utilizing jquery bootstrap datatables for client-side data rendering with JSON as the data source, I have implemented a filter on top of the view/table using a combobox. The first column of the table contains values such as: Value A, Value AB, Value C, Va ...

jquerytwitter-bootstrap-3datatables

Using conditional statements like 'if' and 'else' in JavaScript can

Can someone help me with solving my problem using if-else statements in Javascript? I need to filter names by gender and save them as keys - woman / man in local storage. Any assistance would be greatly appreciated. I am struggling to figure out how to im ...

javascripthtmljsonif-statementlocal-storage

Duplicate material upon transfer via jQuery

Struggling with moving content and encountering repeated instances at the target position. The issue arises due to four identical html structures, which are actually the last four recent posts displayed in a PHP-powered WordPress loop. Attempted using the ...

phpjquerywordpress

Why is the camera access permission dialog not showing up in the WeChat app?

Why is it that when I attempt to open the following links for the first time, Chrome asks for camera permission, but when I access them through WeChat's in-app browser, the camera permission dialog does not appear? Can someone shed some light on this ...

htmlhtml5-videowebrtcgetusermediawechat

Initiating the ngOnInit lifecycle hook in child components within Angular

I am facing an issue with controlling the behavior of child components in my Angular application. The problem arises when switching between different labels, causing the ngOnInit lifecycle hook of the children components not to trigger. The main component ...

htmlangulartypescriptangular-material

Learn how to use Bootstrap 4 to selectively filter through a list by their data attribute values

I am currently working with a PHP form that looks like this: <form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search"> <label class="assistive-text" for="s"> &l ...

twitter-bootstrapbootstrap-4

Navigating child components within a flat list using React Native

Hello everyone, I am relatively new to React Native and JavaScript, and I'm currently trying to grasp the concept of react native navigation. In my project, I have a home screen that contains a CardFlatList component with multiple CardComponents. The ...

javascriptreactjsreact-native

How can I prevent CSS styles from affecting all the tables on my website?

One issue I'm facing is that the CSS code intended for one table is affecting all the other tables on my website. Here is an example of the CSS code: tr:last-child td:last-child { border-bottom-right-radius:3px; } /*effects map*/ td { background: ...

htmlcss

What is the reason behind the absence of unwrapping when utilizing a ref as an element within a reactive array or reactive Map?

The Vue documentation states the following: Unlike reactive objects, there is no unwrapping performed when the ref is accessed as an element of a reactive array or a native collection type like Map Here are some examples provided in the documentation: c ...

javascriptvue.jsvuejs3

Tips for customizing the background color of the MUI Menu Popover within a TextField that has the select property

In my quest to customize the appearance of a popover or menu in a TextField with the 'select' property, I referred to MUI customization docs for guidance. Successfully changing the text and label color of a TextField using the code below: const u ...

javascriptreactjsmaterial-ui

Hide the border on a table with CSS

I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...

htmlcsswordpress

Aligning CSS border headers in a slanted or rotated table cell format

Is there a way to create slanted or rotated table headers in HTML? How can I ensure that the slanted inner-side header border aligns perfectly with the vertical border of the table cell element? Here is an example of the HTML code: <table> < ...

htmlcss

Adjust the size of a stacked object on top of another object in real-time

Currently, I am working on a project using three.js where users have the ability to modify the dimensions of a 3D model dynamically. The issue I'm encountering is similar to a problem I previously posted about stacking cubes together, which you can fi ...

javascriptthree.js

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

Choosing the date and time using the picker with the type of 'datetime-local'

Is there a way to ensure that the start date/time is always earlier than the end date/time when selecting them using two text-field HTML elements? <v-text-field id="setTime" outlined type="datetime-local" label="Start ...

javascriptvue.jsvuetify.js

Trouble with Establishing Fresh Routes in Express.js

I am currently using express.js to develop an application with two ejs pages that are accessible through navigation. However, I am looking to expand the functionality of my app by incorporating more ejs (pug) pages to make it more dynamic. I want to update ...

javascriptnode.jsexpressejs

Customize RequireJS dependencies for flexible dependency injection

Currently, I am faced with integrating a component that would greatly benefit from Dependency Injection (DI) into an existing framework where DI was not considered during its initial design. The configuration defining dependencies is sourced from a backend ...

javascriptdependency-injection

The suggestions for auto-complete in jQuery are not showing up as expected

I am looking to implement a feature where suggestions from the database are automatically populated in a text box as I type. Additionally, when I select a suggestion, other related text fields should be filled automatically. Below is the code snippet: Vi ...

javascriptphpjquerycodeigniter

What is the best way to vertically align items within a <div> using CSS in a React application?

The layout of the page looks like this: https://i.sstatic.net/NGCNP.png I am trying to center the Redbox (containing '1') within the "PlayerOneDiv". Similarly, I want to center the yellow box within "PlayerTwoDiv". return ( ...

htmlcssreactjsangularflexbox

Installing different versions of a package in npm can be done by loading multiple versions

I am in the process of setting up a web API and I want to provide support for various versions of the underlying library. In essence, I would like to access it through: where x.y.z represents the version of the library I am utilizing. Using npm for mana ...

javascriptwebservicenpmversions