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
Related
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 am very new to angular 6, I have created tabs in HTML and I need to convert it in angular 6 and also make it dynamic. below is my HTML code-
<ul class="nav nav-tabs side_nav" role="tablist">
<li role="presentation" class="dashboard_li active">
</li>
<li role="presentation" class="dashboard_li">
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
I have converted it angular 6, below is my angular code -
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = coinwallet" aria-controls="one" role="tab" data-toggle="tab"></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="one"></div>
<div role="tabpanel" class="tab-pane active" id="two"></div>
</div>
Now I have two pints here -
1- how would I make tab-content dynamic according to tabs
2- Currently tabs are not working, as I am changing from one tab to another tab, tab-content always remain same, it's not changing according to the tab.
Any help would be appreciated. Thanks in advance.
you need to show/hide tab-content using *ngIf angular directive
<ul class="nav nav-tabs side_nav" role="tablist">
<li *ngFor="let wallet of coinwallet; let first = first;" [ngClass]="{firstItem: first}" role="presentation" class="accounts_li" [class.active]="selectedwallet===wallet">
<a (click)="selectedwallet = wallet" aria-controls="one" role="tab" data-toggle="tab">{{wallet}}</a>
</li>
</ul>
<div class="tab-content">
<div *ngIf="selectedwallet === coinwallet[0]" role="tabpanel" class="tab-pane active" id="one">wallet 1 content</div>
<div *ngIf="selectedwallet === coinwallet[1]" role="tabpanel" class="tab-pane active" id="two">wallet 2 content</div>
</div>
.ts:
coinwallet: string[] = ['wallet1','wallet2'];
selectedwallet = this.coinwallet[0];
check working code here
I think rather than converting HTML tabs to Angular, You can directly user ng-bootstrap components which works very well with Angular and comes with lot of configurable options. below is a link for ng-bootstrap tabs
https://ng-bootstrap.github.io/#/components/tabs/examples
This is my code:
<li><a class="section-link" href="#ex"><strong>1</strong></a>
<li><a class="section-link" href="#ex"><strong>2</strong></a>
<section id="ex">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">1</a></li>
<li><a data-toggle="tab" href="#menu1">2</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
some data
</div>
<div id="menu1" class="tab-pane fade">
some data
</div>
</div>
</section>
When clicking the second link,I want the page to scroll to the section "ex" and make the second tab-pane active.
U should try this startbootstrap-scrolling-nav, there are all what u need and usage tutorial.
I hope scrolling is already working...
use jquery to add class active to the second tab-pane...
add the following code... it runs when you click on any of the li elements ".section-link" and add class active...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".section-link").on('click', function() {
$('.tab-pane:eq(1)').addClass('active');
});
});
</script>
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>
This is currently the code I'm working with.
I want it to be able to switch tabs however it does not. I've tried taking off the active class however it still doesn't work.
I followed a tutorial to do it this way which didn't require JavaScript.
Can anyone help me find out why it is not working?
<div class="nav">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#Home">Home</a></li>
<li><a data-toggle="tab" href="#Tournaments">Tournaments</a></li>
<li><a data-toggle="tab" href="#About">About</a></li>
<li><a data-toggle="tab" href="#Contact">Contact</a></li>
</ul>
</div>
<div class="tab-content">
<div id="Home" class="tab-pane fade">
<h3> example </h3>
</div>
<div id="Tournaments" class="tab-pane fade">
<h3>create images to show for new pages</h3>
</div>
<div id="About" class="tab-pane fade">
<h3>6214</h3>
</div>
<div id="Contact" class="tab-pane fade">
<h3>exds</h3>
</div>
</div>
You are missing all javascripts.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
Refer to this : https://codepen.io/jrcanicula/pen/vmojRG