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>
Related
I have a list of meals eaten during the day, categorized by meal: breakfast, lunch and dinner, each with its respective courses. The tab contents show the quantities.
Link on jsFiddle: https://jsfiddle.net/3ma0yt7k/2/ (code gets too long to paste the bulk of it in)
<div class="container">
<div class="tabbable boxed parentTabs">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#meal1">Breakfast</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#lunch">Lunch</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dinner">dinner</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#all">See All Meals</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active fade show in" id="meal1">
<div class="tabbable">
<ul class="nav nav-pills active nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#yoghurt">yoghurt</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#cornflakes">corn flakes</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show fade active in" id="yoghurt">
<div class="form-group row">
<p>3 cups of yoghurt</p>
</div>
</div>
<div class="tab-pane fade" id="cornflakes">
<div class="form-group row">
<p>4 bowls of cornflakes</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="lunch">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#fries">Fries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#falafel">Falafel</a>
</li>
</ul>
<div class="tab-content table-top">
<!--pane detail-->
<div class="tab-pane show fade active in" id="fries">
<p>4 plates of fries</p>
</div>
<div class="tab-pane fade in" id="falafel">
<p>4 bowls of falafel</p>
</div>
</div>
</div>
</div>
<!--dinner-->
<div class="tab-pane fade in" id="dinner">
<div class="tabbable">
<ul class="nav nav-pills nav-justified">
<li class="nav-item">
<a class="nav-link active" href="#pasta">Pasta</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#pizza">Pizza</a>
</li>
</ul>
<div class="tab-content table-top">
<div class="tab-pane show fade active in" id="pasta">
<div class="form-group row">
<p>3 plates of pasta</p>
</div>
</div>
<div class="tab-pane fade" id="pizza">
<div class="form-group row">
<p>3 slices of pizza</p>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane fade in" id="all">
<p>gather them all</p>
</div>
</div>
</div>
</div>
I want to click "See all meals" and get a list with all the .tab-pane elements for each of the meals of the day. Basically clicking "see all" should show the panes with the text concerning yoghurt, corn flakes, fries, falafel, pasta and pizza (without the 'children' panes).
I can only gather them up if they are in a single category, or parent-child relationship (like Breakfast where each .tab-pane gets a class of 'active' but that doesn't work for the other ones (unless clicked)?
Apparently the only way to achieve this is to add an extra class to the top-most row of the tabs. this class will then be toggled to display "none" and the elements inside will all have an additional class of "active show".
<div class="tab-pane active **toggle-showing-of-this-class** fade show in" id="meal1">
If anyone has another more elegant solution in the meanwhile it would be nice.
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 am using jquery tabs to create 3 tabs and following is my html code
<div id="sections" class="sections">
<ul class="sections" role="tablist">
<li class="active" role="presentation">
User
</li>
<li role="presentation">
Setting
</li>
<li role="presentation">
Customer
</li>
</ul>
<div class="tab-content">
<section id="user" class="panel" role="tabpanel">
Some content is here
</section>
<section id="setting" class="panel" role="tabpanel">
Some content is here
</section>
<section id="customer" class="panel" role="tabpanel">
Some content is here
</section>
</div>
And initilizing the tabs like
$('#sections').tabs();
Now when I access the page with /#setting at url end it briefly opens User Tab first before showing the Setting tab. How can I avoid this?
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.
Hi I am using the following code to create tabbed layout using twitter bootstrap
<ul class="nav nav-tabs" >
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
now in all tabs i need different page to load.So i want to do this :
<ul class="nav nav-tabs" >
<li class="active">Home</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
I don't want to load the content from same page in all tabs and above code is not loading new page.Please help..
update :
<ul class="nav nav-tabs" id="myTab">
<li class="active">Request Audit</li>
<li>status</li>
<li>Settings</li>
<li>Help</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="audit">
<p>audit</p>
</div>
<div class="tab-pane" id="status">
<p>status</p>
</div>
<div class="tab-pane" id="settings">
<p>settings</p>
</div>
<div class="tab-pane" id="help">
<p>help</p>
</div>
</div>
I have added this script
<script>
$('#myTab a[href="#status"]').click(function (e) {
e.preventDefault();
$(this).tab('show');
$('#status').load('status.html');
});
</script>
There are several ways to do this, but before deciding which one to use, I'd want to make sure you actually want to piece out your files like that. What's keeping you from just putting the content inside of the tabs on the page as it is?
If not, why not use PHP?
If you decide to stick with your current plan, the way I'd accomplish what you're looking to do would be through jQuery and AJAX.
First, you want to make sure you're using the proper Bootstrap structure – check out the Tabbable Nav section, and make your markup tabs correspond to empty content areas:
<div class="tabbable" style="margin-bottom: 18px;">
<ul class="nav nav-tabs">
<li class="active">Request Audit</li>
<li class="">Status</li>
<li class="">Settings</li>
<li class="">Help</li>
</ul>
<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">
<div class="tab-pane active" id="tab1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="tab2">
<p>Placeholder 2</p>
</div>
<div class="tab-pane" id="tab3">
<p>Placeholder 3</p>
</div>
<div class="tab-pane" id="tab4">
<p>Placeholder</p>
</div>
</div>
</div>
Then, use jQuery.load to fill in the tab-panes!
$('#tab2').load('/status.html');
$('#tab3').load('/settings.html');
$('#tab4').load('/help.html');
Just remove the data-toggle="tab"
for example: on the Home Page:
<ul class="nav nav-tabs" >
<li class="active"><a href="#" >Home</a></li>
<li><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>Home Page content 1</p>
</div>
</div>
On the status.html page:
<ul class="nav nav-tabs" >
<li ><a href="#" >Home</a></li>
<li class="active"><a href="status.html" >status</a></li>
<li><a href="settings.html" >Settings</a></li>
<li><a href="help.html" >Help</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>status content 1</p>
</div>
</div>
The bad thing is just have some copy of the nav-tab codes