-2

My page is having cloned multiple nav with same class and id names. While navigating with nav-pills and data-toggle only 1st set is reflecting with selected other sets are not reflecting with selected.

What's going wrong and how can I fix it?

body {
  padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> </li>
    <li role="presentation" class="active">
      <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
  </div>

</div>

<div>
  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation">
      <a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a> </li>
    <li role="presentation" class="active">
      <a href="#office" aria-controls="profile" role="tab" data-toggle="tab">Office</a>
    </li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane" id="home">Home</div>
    <div role="tabpanel" class="tab-pane active" id="office">Office</div>
  </div>

</div>

View on jsFiddle

showdev
  • 28,454
  • 37
  • 55
  • 73
Jithendra
  • 1
  • 1
  • 1
    In HTML, [IDs must be unique to the DOM tree](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page). You might try using different IDs for the second set of nav/panes, something like `#home2` and `#office2`. [Here's a demo](https://jsfiddle.net/asLnuphd/). – showdev Mar 02 '21 at 21:32

1 Answers1

0

ID must be unique in the whole page

Jorge Cribb
  • 396
  • 2
  • 4