I am using Bootstrap tabs in my website. When page loads tab will be filled with data at run-time using dynamic content. I am using data-target attribute on anchor tag for that, but it does not seems to work at all.
Here is what I tried so far:
HTML
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 3
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="test_1"></div>
<div role="tabpanel" class="tab-pane active" id="test_2"></div>
<div role="tabpanel" class="tab-pane active" id="test_3"></div>
</div>
</div>
</div>
Here I am trying to load content of remote file showTab1.do inside div with id="test_1" when using data-target="#test_1" on anchor tag. But it is not working. What I know is if I am using data-target we don't need to write any jQuery/JavaScript to load data in tab as data-target will do that for us(correct me if I am wrong).
My Bootstrap version is v3.3.6.
Please correct me where I am wrong.
Thanks
There is no way to automatically load data from another url into the tab content using data attributes. You'd need to fire the jQuery load() method when the show tab event fires...
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
...
$(target).load(url,function(result){
...
});
});
Example:
http://codeply.com/go/xZfTnAtKUM
HTML :
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
Tab 1
</li>
<li role="presentation">
Tab 2
</li>
<li role="presentation">
Tab 3
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="test_1"></div>
<div role="tabpanel" class="tab-pane" id="test_2"></div>
<div role="tabpanel" class="tab-pane" id="test_3"></div>
</div>
</div>
</div>
and load the tab content using jQuery load
JAVASCRIPT:
<script>
$(document).ready(function () {
$('#test_1').load('showTab1.do');
$('#test_2').load('showTab2.do');
$('#test_3').load('showTab3.do');
});
</script>
There were a couple of errors but this works. I added the Tab 1,2 and 3 to the tab panes so you can see the result when you click the nav links (jsut remove the text so it doesn't mess up your flow)..
<div class="container">
<div class="row">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Tab 1</li>
<li role="presentation">Tab 2</li>
<li role="presentation">Tab 3</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="test_1">Tab 1</div>
<div role="tabpanel" class="tab-pane fade" id="test_2">Tab 2</div>
<div role="tabpanel" class="tab-pane fade" id="test_3">Tab 3</div>
</div>
</div>
</div>
Hope this helps - and then load the data into the tab panes using the .load() method as described below.
Related
I am trying to to build a multi level bootstrap tabs with breadcrumbs above it.
The idea is to expand breadcumbs as you go through tabs1 to 3. That works.
And then I would like to hide last breadcrumb element once you go from fully expanded multi tabs to new tab, where there is no expanded tabs yet.
The code for breadcrumbs is:
<ul id="catLevelBreadcrumbs">
<li role="presentation" class="active breadElement breadElementL1">
<span>Step 1</span></li>
<ul id="catLevelBreadcrumbsInner">
<li role="presentation" class="breadElement breadElementL2 showBreadL2">
<span>Step 2</span></li>
<li role="presentation" class="breadElement breadElementL3 showBreadL3">
<span>Step 3</span></li>
</ul>
</ul>
enter image description here
And then there is multi tabs
- cat1L
- cat2L
-cat3L
<ul id="catLevel1" class="nav nav-tabs" role="tablist">
<li class="kat1-tab-0-faq active"></li>
<li class="kat1-tab-1-faq"></li>
</ul>
<div id="contentLevel1">
<div role="tabpanel" class="tab-pane fade" id="first-cat-faq"></div>
<div role="tabpanel" class="tab-pane fade active in" id="second-cat-faq">
<ul id="catLevel2" class="nav nav-tabs" role="tablist">
<li class="kat2-tab-0-faq active"></li>
<li class="kat2-tab-1-faq"></li>
</ul>
<div id="contentLevel2">
<div role="tabpanel" class="tab-pane fade active in" id="first-cat-faq-l2"></div>
<div role="tabpanel" class="tab-pane fade" id="second-cat-faq-l2"></div>
</div>
</div>
</div>
enter image description here
I am trying to solve it with such js code, but It fails to do what I planned.
jQuery(document).on('click', '#catLevel1.nav-tabs > li' ,function(e){
$this = jQuery(this);
if(!$this.parent().next().find('#catLevel2 > li.active').hasClass('active'))
{
console.log('is active');
jQuery('.breadElement.breadElementL3').removeClass('showBreadL3');
}
});
Focus here is... the tab that I click needs to be the only one selected, even if there are two sets of tabs on my page (as shown below):
http://codepen.io/mutualdesigns/pen/pbGjbX
NOTE: Once I click in one of the tabs above, and then one below, I have two tabs selected at the same time. If I had a third set of tab, and clicked a link on this third set, I was going to have 3 activated (selected) links...
HOW DO I GET ONLY THE LINK I CLICKED SELECTED (EVEN THOUGH THERE'S ANOTHER SELECTION IN ONE OF THE OTHERS SETS OF TABS)?
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" 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 role="tabpanel" class="tab-pane" id="5">5</div>
<div role="tabpanel" class="tab-pane" id="6">6</div>
<div role="tabpanel" class="tab-pane" id="7">7</div>
<div role="tabpanel" class="tab-pane" id="8">8</div>
</div>
</div>
A solution (neither the best, nor the prettiest) is the following. I based it loosely on suggestions given here
<script>
function toggle(clickedElem) {
// Store all active elements in a variable for later use
var elements = document.querySelectorAll(".nav-tabs li.active");
// Iterate over the elements and remove the active class from the classlist. We made sure there was a active class by using the querySelector
for (var i = 0; i < elements.length; i++) {
elements[i].classList.remove('active');
}
// Add the active class to the parent of the clicked link
clickedElem.parentElement.classList.add("active");
}
</script>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!--not going to be repeating the same code but the rest of your code continues here(add the onclick to the other tags obviously)-->
This could also be done using jQuery. For that you'd be using toggleClass or removeClass/addClass
P.S. emphasized text (template after clicking the I in the editor.
Overview:
I want to make two level navigation of tab-content with one level content. This is my code:
<ul>
<li>
<a data-toggle="tab" href="#main">Main</a>
</li>
<li>
<ul>
<li>
<a data-toggle="tab" href="#nested">Nested</a>
</li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="main">Main Content</div>
<div class="tab-pane" id="nested">Nested Content</div>
</div>
It doesn't work when I do the following steps:
Click Main
Click Nested
Click Main
Details:
Initially everything is ok, code in browser looks like from source.
When I click on Main i works
When I click on Nested active class doesn't removed from first li.
Now can I click whatever and nothing happens.
JSFiddle
https://jsfiddle.net/cvgd720s/
Docs
http://getbootstrap.com/javascript/#tabs
You can nest your child tabs like so:
<div class="container">
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Home</li>
<li role="presentation">Profile</li>
<li role="presentation">Messages</li>
<li role="presentation">Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">
Home
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">Nested 1</li>
<li role="presentation">Nested 2</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="nested1">Nested 1</div>
<div role="tabpanel" class="tab-pane" id="nested2">Nested 2</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="profile">Profile</div>
<div role="tabpanel" class="tab-pane" id="messages">Messages</div>
<div role="tabpanel" class="tab-pane" id="settings">Settings</div>
</div>
</div>
CODEPEN
I solved this problem myself added the script, that remove any active class:
<script>
(function(){
var menu = document.getElementsByTagName("li")[0];
var list = document.querySelectorAll("li");
menu.addEventListener("click", function() {
[].forEach.call(list, function(item) {
item.classList.remove("active");
});
});
})();
</script>
It is important, that script should be placed before jquery.js and bootstrap.js.
I use Bootstrap nav-tabs. With the example below I have no problem if the page's URL is mypage
($stateProvider.state('ide', {url: '/mypage',...)
but I must have an id parameter
($stateProvider.state('ide', {url: '/mypage/:id',...)
that no longer works. I am redirected to the homepage of the site . Do you know how to change my code to make it work?
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
My link go to http://localhost:8080/#/mypage#tab2 instead of http://localhost:8080/#/mypage/1063#tab2
I find the solution:
In my AngularJS controller I add:
$scope.keepId=id;
In my HTML page, I add #/mypage/{{keepId}} in link:
<div>
<ul class="nav nav-tabs">
<li class="active">
Tab 1
</li>
<li class="">
Tab 2
</li>
<li class="">
Tab 3
</li>
</ul>
<div class="tab-content">
<div class="active tab-pane fade in" id="tab1">
<div id="editorA"></div>
</div>
<div class="tab-pane fade in" id="tab2">
<div id="editorB"></div>
</div>
<div class="tab-pane fade in" id="tab3">
<div id="editorC"></div>
</div>
</div>
</div>
I am currently working with bootstrap, I want to add a twitter bootstrap tab, I have added jQuery and bootstrap-tabs.js
I have added the following script:
<script>
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
});
</script>
and I am using the following code to add the tabs :
<div class="span12" id="stafftabs" style="margin-bottom: 20px;display:none;">
<ul id="myTab" class="nav nav-tabs">
<li class="active">
Home
</li>
<li>
Profile
</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>
#fat
</li>
<li>
#mdo
</li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>Raw</p>
</div>
<div class="tab-pane fade" id="profile">
<p>Food</p>
</div>
<div class="tab-pane fade" id="dropdown1">
<p>Etsy</p>
</div>
<div class="tab-pane fade" id="dropdown2">
<p>Trust</p>
</div>
</div>
</div>
</div>
I am getting the tabs to working properly, but no data is being shown in the tabs,
please help me guys to go out from this problem ?
Here you have a jsFiddle working without using JS. Easy to codify, simpler and faster.
You only need to use class="tabbable"