I try to add bootstrap tabs functionality within the owl carousel 2. But it does not work properly.
First time click on any menu item it works fine and shows proper related value but when clicking for the second time it does not work. Stuck at last clicked value. Also, the classes do not change from the second click.
HTML
<div class="tab-content">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">111111111111</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">2222222222222</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">3333333333333333</div>
</div>
<div class="owl-carousel owl-theme tab-slide" id="" 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"><img src="imgs/gallery/gal-1.jpg"></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"><img src="imgs/gallery/gal-2.jpg"></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"><img src="imgs/gallery/gal-3.jpg"></a>
</div>
JAVASCRIPT
jQuery(document).ready(function() {
$(".tab-slide").owlCarousel({
'items': 2,
'nav': true,
'navText': ['<i class="fa fa-chevron-left"></i>','<i class="fa fa-chevron-right"></i>']
});
});
It's an old issue we had on our first beta of Bootstrap, if you update to our latest release (beta 2) everything should work
Related
I am using Bootstrap 5 nav tabs but the tabs are not changing on Firefox version 89.0.2 and internet explorer 11+. There are no errors in the console.
cdn js:
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js"></script>
html:
<nav>
<div class="nav nav-tabs" id="dvtabs" role="tablist">
<button class="nav-link active" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="true">C</button>
<button class="nav-link" id="nav-associate-tab" data-bs-toggle="tab" data-bs-target="#nav-associate" type="button" role="tab" aria-controls="nav-associate" aria-selected="false">A</button>
</div>
</nav>
<div class="tab-content" id="dvtabcontent">
<div class="tab-pane fade show active" id="nav-contact" role="tabpanel" aria- labelledby="nav-contact-tab"></div>
<div class="tab-pane fade" id="nav-associate" role="tabpanel" aria- labelledby="nav-associate-tab"></div>
</div>
After a simple test, I found that it can work correctly in FireFox (referenced jquery 3.6.0 and bootstrap.css/js 5.0.1). I am not sure if you have referenced jquery and bootstrap.css. But it does not work in IE11. According to the error message in the console, I think the cause of the problem is that IE does not support arrow functions.
If you need to use bootstrap to achieve such a function, I recommend you to use bootstrap4. After testing, it can work correctly in IE11 using bootstrap4.
Simple test：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<button class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-home" aria-selected="true">C</button>
<button class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-associate" role="tab" aria-controls="nav-profile" aria-selected="false">A</button>
</div>
</nav>
<div class="tab-content" id="dvtabcontent">
<div class="tab-pane fade show active" id="nav-contact" role="tabpanel" aria- labelledby="nav-contact-tab">panel C</div>
<div class="tab-pane fade" id="nav-associate" role="tabpanel" aria- labelledby="nav-associate-tab">panel A</div>
</div>
</body>
</html>
I am trying to add deep linking for bootstrap tabs. It does add the tab id to the URL on each tab click but when I access the direct link (www.site.com/tabpage/#tab2) for the particular tab in a new browser window, it doesn't take me to the second tab. how can I make it work?
I need to get the direct URL to the particular tabs.
Here is the code used
HTML
<div class="tab_container">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item mr-4 no-gutter">
<a class="nav-link active" href="#tab1" role="tab" data-toggle="tab">Tab 1</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab2" role="tab" data-toggle="tab">Tab 2</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab3" role="tab" data-toggle="tab">Tab 3</a></li>
<li class="nav-item mr-4 no-gutter">
<a class="nav-link" href="#tab4" role="tab" data-toggle="tab">Tab 4</a></li>
</ul>
<div class="tab-content cisco-extralight p-4 pt-5 no-gutter">
<div role="tabpanel" class="tab-pane fade in active" id="tab1">
Tab 1 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab2">
Tab 2 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab3">
Tab 3 contenrt
</div>
<div role="tabpanel" class="tab-pane fade in active" id="tab4">
Tab 4 contenrt
</div>
</div>
</div>
JS
//tab deep linking
var url = window.location.href;
if (url.indexOf("#") > 0){
var activeTab = url.substring(url.indexOf("#") + 1);
$('.nav[role="tablist"] a[href="#'+activeTab+'"]').tab('show');
}
$('a[role="tab"]').on("click", function() {
var newUrl;
const hash = $(this).attr("href");
newUrl = url.split("#")[0] + hash;
history.replaceState(null, null, newUrl);
});
Here the tabs part of code:
<div class="col">
<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">Main</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="/questions" role="tab" aria-controls="v-pills-profile" aria-selected="false">Questions</a>
</div>
</div>
Href attribute also somehow doesn't work
In the docs:
Components requiring JavaScript:
Alerts for dismissing
Buttons for toggling states and checkbox/radio functionality
Carousel for all slide behaviors, controls, and indicators
Collapse for toggling visibility of content
Dropdowns for displaying and positioning (also requires Popper.js)
Modals for displaying, positioning, and scroll behavior
Navbar for extending our Collapse plugin to implement responsive behavior
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Scrollspy for scroll behavior and navigation updates
You should also include JS files (jQuery, Popper.js, BootstrapJS) to make some components work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="col">
<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">Main</a>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#questions" role="tab" aria-controls="v-pills-profile" aria-selected="false">Questions</a>
</div>
</div>
So I'm trying to implement a data toggle using bootstrap 4.2.1. Following the documentation, I came up with the following code:
<div class="container">
<div class="row bottom-section position-relative">
<ul class="nav nav-pills" role="tablist">
<li class="nav-item">
<a class="nav-link nav-team active text-center" id="team-tab" data-toggle="tab" data-target="#team" aria-controls="team" role="tab" aria-selected="true">Team</a>
</li>
<li class="nav-item">
<a class="nav-link nav-individual text-center" id="individual-tab" data-toggl="tab" data-target="#individual" aria-controls="individual" role="tab" aria-selected="false">Individual</a>
</li>
</ul>
<div class="bottom-section-content col-sm-12">
<div class="tab-content">
<div class="tab-pane active" id="team" role="tabpanel" aria-labelledby="team-tab"><p>asd</p></div>
<div class="tab-pane" id="individual" role="tabpanel" aria-labelledby="individual-tab"><p>sad</p></div>
</div>
</div>
</div>
</div>
I cant't figure out what is wrong, it should be working like this. Am I missing something with the bootstrap js?
I used your code and found that if you are using 4.1.3, this implementation will not work with your current HTML. You have to upgrade your JS to Bootstrap 4.2.1.
Use: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js
Also #elveti is right you misspelled data-toggle.
Working Example using (4.2.1): https://codepen.io/brooksrelyt/pen/zeNVxo
I am getting multiple users from an API call and all are being generated with the same html and css. When I navigate the tabs of each user only the first user changes instead of the specific user. I have tried interpolating the id but comes to no effect. Here is the code.
<div *ngFor="let user of users" class="container emp-profile">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="about-tab" data-toggle="tab" href="#about" role="tab" aria-controls="about" aria-selected="true">About</a>
</li>
<li class="nav-item">
<a class="nav-link" id="address-tab" data-toggle="tab" href="#address" role="tab" aria-controls="address" aria-selected="false">Address</a>
</li>
<li class="nav-item">
<a class="nav-link" id="company-tab" data-toggle="tab" href="#company" role="tab" aria-controls="company" aria-selected="false">Company</a>
</li>
</ul>
<div class="row">
<div class="col-md-4">
</div>
<div class="col-md-8">
<div class="tab-content profile-tab" id="myTabContent">
<div class="tab-pane fade show active" id="about" role="tabpanel" aria-labelledby="about-tab">
You should not provide static id to html elements when using an *ngFor. You will get several html elements with the same id, so your <a> tags won't know where to go exactly and will target the first they encounter. That's why only your first user changes.
You can specify a dynamic id using Angular :
<div [id]="'my-tab-' + user.name"></div> // id === 'my-tab-user1'