Я действительно новичок в начальной загрузке, и, поскольку я освоил его, поскольку он прост в использовании, я начал создавать веб-страницу, по которой люди могут легко перемещаться.
Я использовал загрузчик, чтобы поставитьвнутри гармошки внутри навигационной панели, чтобы легче ориентироваться.Дело в том, что хотя первая вкладка и аккордеон работают должным образом, когда я перехожу на другие вкладки и взаимодействую с другими аккордеонами, они не работают должным образом.
Когда вы нажимаете на любую из карт в первомаккордеон, вы можете видеть, что другой закрывается, но когда вы пробуете это в других, карты всегда отображаются, я не знаю, что это может быть.
Я проверил имена для цели данных, data-toggle, а также aria-labelledby и классы, но все равно не смогли найти детали, я не знаю, из-за ли это div, так как я вставляю div с классом accordion в каждую вкладкуpane.
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home"
aria-selected="true">1. Introducción</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile"
aria-selected="false">2. Síntomas de la DMRE húmeda</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact"
aria-selected="false">3. Factores de riesgo</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<!--Primera seccion, INTRODUCCION-->
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<div class="accordion" id="accordion" style="width: 100%">
<div class="card">
<div class="card-header" id="headingOneOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne">
<h1 style="display: inline-block;">1.1</h1>
<h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
</button>
</h5>
</div>
<div id="collapseOneOne" class="collapse show" aria-labelledby="headingOneOne" data-parent="#accordion">
<div class="card-body">
<h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
<h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
a convivir con ella.</h2>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingOneTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOneTwo" aria-expanded="false"
aria-controls="collapseOneTwo">
<h1 style="display: inline-block;">1</h1>
<h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
</button>
</h5>
</div>
<div id="collapseOneTwo" class="collapse" aria-labelledby="headingOneTwo" data-parent="#accordion">
<div class="card-body">
<h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
<h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
a convivir con ella.</h2>
</div>
</div>
</div>
</div>
</div>
<!--Segunda seccion, Sintomas-->
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<div class="accordion" id="accordion" style="width: 100%">
<div class="card">
<div class="card-header" id="headingTwoOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwoOne" aria-expanded="true" aria-controls="collapseTwoOne">
<h1 style="display: inline-block;">2.1</h1>
<h2 style="display: inline-block; margin-left: 10px;">
Síntomas de la descripción de la DMRE húmeda</h2>
</button>
</h5>
</div>
<div id="collapseTwoOne" class="collapse show" aria-labelledby="headingTwoOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwoTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwoTwo" aria-expanded="false"
aria-controls="collapseTwoTwo">
<h1 style="display: inline-block;">2.2</h1>
<h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
</button>
</h5>
</div>
<div id="collapseTwoTwo" class="collapse" aria-labelledby="headingTwoTwo" data-parent="#accordion">
<div class="card-body">
<h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
<h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
a convivir con ella.</h2>
</div>
</div>
</div>
</div>
</div>
<!--Tercera seccion, Factores de riesgo-->
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<div class="accordion" id="accordion" style="width: 100%">
<div class="card">
<div class="card-header" id="headingThreeOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<h1 style="display: inline-block;">3.1</h1>
<h2 style="display: inline-block; margin-left: 10px;">Introducción</h2>
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingThreeOne" data-parent="#accordion">
<div class="card-body">
<h1>Cuando Laura notó por primera vez que su visión se estaba volviendo borrosa,</h1>
<h2>nunca había escuchado sobre la Degeneración Macular Relacionada con la Edad de tipo Húmeda. Observe cómo aprendió
a convivir con ella.</h2>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false"
aria-controls="collapseThree">
<h1 style="display: inline-block;">3</h1>
<h2 style="display: inline-block; margin-left: 10px;">Factores de riesgo</h2>
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute,
non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt
aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
Вот также мой код в fiddle , чтобы вы могли лучше рассмотреть его.