HTML navigation tabs doesn't work - html

Question

Hi I have complication regarding on bootstrap. My code doesn't work is there something wrong? any idea to solve the problem?--thanks
<nav id='nav-reservation'>
<div class="container">
<ul class="nav nav-tabs">
<a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a>
<a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a>
</ul>
</div>
<div class="tab-content">
<div id="room" class="tab-pane fade in active"></div>
<div id="equipment" class="tab-pane fade in active"></div>
</div>
</nav>

Answer 1

You forgot to add li tag in ul tag.
<nav id='nav-reservation'>
<div class="container">
<ul class="nav nav-tabs">
<li> <a href='resource-index.php?page=room' class='nav-reservation-item <?php if($_REQUEST[' page '] == "room"){ echo "active"; } ?>'>Room</a></li>
<li> <a href='resource-index.php?page=equipment' class='nav-reservation-item <?php if($_REQUEST[' page '] == "equipment"){ echo "active"; } ?>'>Equipment </a></li>
</ul>
</div>
<div class="tab-content">
<div id="room" class="tab-pane fade in active"></div>
<div id="equipment" class="tab-pane fade in active"></div>
</div>

Answer 2

The first thing is that you have both of your tab content pane's with the in active classes on them and the only one that should have these classes is the active open pane. Having both of these with the in active classes will show both of the tabs at the same time.
Next the tabs are activated by a hashtag in the href of the nav tabs. And you have no hashtag. They should correspond with the tab pane that you want to open. So if you want to open the tab with the id #room in the href in the nav tabs you should specify this. Also you should put the data-toggle="tab" in the href as well like so:
<a data-toggle="tab" href="#room">Room</a>
This will open the tab with the id #room
So your markup should look something like the following without your custom php:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#room">Room</a></li>
<li><a data-toggle="tab" href="#equipment">Equipment</a></li>
</ul>
<div class="tab-content">
<div id="room" class="tab-pane fade in active">
First Tab
</div>
<div id="equipment" class="tab-pane fade">
Second Tab
</div>
</div>