I have a page composed of 4 tabs.
I want to switch from one tab to another and display its specific content.
As you can see in the following snippet, I want to see "1" when I click on the Tab1, "2" when I click on the Tab2 and so on.
How could I do to make it work ?
Thank you very much for your help.
<div>
<nav class="nav">
<a class="nav-link active" href="#1">Tab1</a>
<a class="nav-link" href="#2">Tab2</a>
<a class="nav-link" href="#3">Tab3</a>
<a class="nav-link" href="#4">Tab4</a>
</nav>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane" id="1">1</div>
<div role="tabpanel" class="tab-pane" id="2">2</div>
<div role="tabpanel" class="tab-pane" id="3">3</div>
<div role="tabpanel" class="tab-pane" id="4">4</div>
</div>
</div>
Related
I am using one main nav-menu and then a second nav-menu, the content for all these are within the same div.
Once I enter the page, Profile is active on default which is correct, I can then enter Test which then becomes active, as expected.
However, once I click on Edit both Edit and the last nav-item inside the Main Nav-menu is active.
Edit then remains active, despite clicking on Profile or Test. This means I have to refresh the page to remove the active-state and in order to see the content inside Edit again.
Any suggestions on what's wrong with this structure?
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span></a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span></a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>
In BS4 a button becomes active when the ACTIVE class is added to it.
Inside the nav tag, the "profile" button is activated by default and when you press the "test" button, "profile" button turns off, assigning the ACTIVE class to test. In this way you can show which menu is active each time.
However "Edit info" is in another nav, where this button is the only element. That's why you have no way to turn it off since there is no other button that turns on and off the previous one.
This operation is typical of the navs in BS4 and is done automatically by means of a javascript code.
To turn off ACTIVE you must delete the ACTIVE class.
The simplest thing is to do it by means of a javascript that is activated when an event occurs.
I leave you an example where when pressing the button "shutdown" the javascritp is activated and the ACTIVE class is eliminated.
This can be associated with a button or any other event that calls this function.
The code could be the following
<div class="container">
<!-- Second Nav-menu -->
<div class="col-lg-4">
<div class="container-fluid">
<ul id="1" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link edit">
<span>Edit info</span>
</a>
</li>
</ul>
<a href="#" data-target="#edit" data-toggle="pill" class="nav-link apagar">
<span>apagar</span>
</a>
</div>
</div>
<!-- End of second Nav-Menu -->
<!-- Main Nav-menu -->
<ul id="2" class="nav nav-pills nav-justified">
<li class="nav-item">
<a href="#profile" data-target="#profile" data-toggle="pill" class="nav-link active show profile">
<span>Profile</span>
</a>
</li>
<li class="nav-item">
<a href="#test" data-target="#test" data-toggle="pill" class="nav-link test">
<span>Test</span>
</a>
</li>
</ul>
<!-- End of main Nav-menu -->
<!-- Tab content -->
<div class="tab-content">
<div class="tab-pane" id="edit" name="edit">
<div class="col-md-12">
<h2>Edit-tab</h2>
</div>
</div>
<div class="tab-pane active show" id="profile">
<div class="col-md-12">
<h3>Profile-tab</h3>
</div>
</div>
<div class="tab-pane" id="test">
<div class="col-md-12">
<h2>Test-tab</h2>
</div>
</div>
</div>
<!-- Tab content end-tag -->
</div>
<script>
$(function() {
$(".apagar").click(function() {
$(".edit").removeClass('active');
});
});
</script>
Good luck
I've incorporated bootstrap tabs into my web app following the documentation on the bootstrap website.
I've so far managed to get the first tab fade animation to play and show the the other two tabs don't seem to work and I'm quite stumped as to why.
<div id="container-fluid">
<div class="row">
<div class="col-md-12">
<ul class="nav nav-tabs" role="tablist">
<li id="dashboardTab" class="nav-item">
<a class="nav-link active" id="dashboard-tab" data-toggle="tab" href="#dashboard" role="tab" aria-controls="dashboard" aria-selected="true">Dashboard</a>
</li>
<li id="usersTab" class="nav-item">
<a class="nav-link" id="userCreate-tab" data-toggle="tab" href="#userCreate" role="tab" aria-controls="userCreate" aria-selected="false">Users<span onclick="onCloseTabButtonClick(0)">X</span></a>
</li>
<li id="wholesalerTab" class="nav-item">
<a class="nav-link" id="wholesalerCreate-tab" data-toggle="tab" href="#wholesalerCreate" role="tab" aria-controls="wholesalerCreate" aria-selected="false">Wholesalers<span onclick="onCloseTabButtonClick(1)">X</span></a>
</li>
</ul>
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<iframe class="iframe-size" id="dashboardHolder" src="Dashboard.aspx" />
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<iframe class="iframe-size" src="UserCreate.aspx" />
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<iframe class="iframe-size" src="WholsalerCreate.aspx" />
</div>
</div>
</div>
</div>
</div>
Alot of similar questions I've read show that the error is simply not importing the Jquery and the bootstrap js files.
<script src="../Scripts/jquery-3.4.1.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
I have got this in my header and do believe it's working.
Tabs do not work well with Iframes. So remove them. It is also a better user experience.
<div class="tab-content">
<div id="dashboard" class="tab-pane fade show active" role="tabpanel" aria-labelledby="dashboard-tab">
<h3>Dash Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div class="tab-pane fade" id="userCreate" role="tabpanel" aria-labelledby="userCreate-tab">
<h3>User Tab</h3>
<div class="iframe-size">
...
</div>
</div>
<div id="wholesalerCreate" class="tab-pane fade" role="tabpanel" aria-labelledby="wholesalerCreate-tab">
<h3>Wholesaler Tab</h3>
<div class="iframe-size">
...
</div>
</div>
</div>
i'm trying to make a form wizard using bootstrap tabs. The layout is simple
Vertical tabs like a sidebar menu and content on right side
| Tab1 | |
| Tab2 | Content |
| Tab3 | |
To do this i used bootstrap grid but there is a problem, if i reduce browser size the content goes under the tabs.
Is there a way to keep content next to tabs despite the browser size?
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
</div>
<div class="col-md-10">
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<div class="form-group">
// content
</div>
</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>
</div>
</div>
</div>
Assuming bootstrap 4, just drop the md breakpoint
use col-2 instead of col-md-2
<div class="row">
<div class="col-2"> 2 col content </div>
<div class="col-10"> 10 col content </div>
</div>
https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
Instead of col-md-2 and col-md-10, md stands for medium, you should use only col-sm. It will stay in 2 columns on all screens except extra small screens. Or you can use tables.
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>
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>
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>
I'm not able to get open first tab on page load. Code below.
<ul id="rowTab" class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#tab_a">Tab A</a></li>
<li><a data-toggle="tab" href="#tab_b">Tab B</a></li>
<li><a data-toggle="tab" href="#tab_c">Tab C</a></li>
<li><a data-toggle="tab" href="#tab_d">Tab D</a></li>
</ul>
<div class="tab-content">
<div id="tab_a" class="tab-pane fade active">
Tab A inner
</div>
<div id="tab_b" class="tab-pane fade">
Tab B inner
</div>
<div id="tab_c" class="tab-pane fade">
Tab C inner
</div>
<div id="tab_d" class="tab-pane fade">
Tab D inner
</div>
</div>
and jQuery
<script type="text/javascript">
$(document).ready(function(){
$('#rowTab a:first').tab('show');
});
</script>
Any clue why is not working?
Thanks
Remove the fade class from the first tab's content..
<div id="tab_a" class="tab-pane active">
Tab A inner
</div>
http://bootply.com/129046
And working version with the fade
<div id="tab_a" class="tab-pane active fade in">
Tab A inner
</div>
Baghoo - Thanks for pointing me to what is causing issue