hi I'm currently working on a cordova project. We use cordova and bootstrap mainly.
I'm having two bootstrap tabs.
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#home"></a></li>
<li><a data-toggle="tab" href="#menu1"></a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane active fade in">
</div>
<div id="menu1" class="tab-pane fade">
add
</div>
</div>
Now in my menu1 tab i'm having this link to add_medication.html. In that i'm having a back button which trigger goBack() as below
function goBack() {
activaTab('menu1');
window.history.go(-1);
alert("in history");
}
function activaTab(tab){
alert("in active");
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
alert("I did it");
}
What I need is to return to the previous page with my menu1 tab opened. All the three alerts are triggered and I'm going back to the previous page. But my activate tab is home tab. How to rectify this???
What am I doing wrong here??
Related
I have to pages. first page I have bootstrap tab. please check below sample
1.first page is user page. its url http://localhost:8081/#!/app/user
in this page there is a tab controller.
<div class="nav-tabs-custom">
<ul class="nav nav-tabs">
<li class="active">One </li>
<li>Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_1">
content 01
</div>
<div class="tab-pane" id="tab_2">
content 02
</div>
</div>
</div>
this is second page. its url http://localhost:8081/#!/app/user-list
this page has back button. When user click this button, page should redirect to the first page (user page) SECOND TAB. How i active SECOND TAB after redirect. Currently i am using below function
$scope.goBack = function () {
$state.go('app.user/#tab_2');
}
Above back function is not working. how i do this work. thanks
Have you tried $ionicHistory?
// include $ionicHistory in your injected dependencies...
$scope.goBack = function() {
$ionicHistory.goBack();
};
In my home page there are 7 links. code of one link is given below.
<a id="mosquito-btn" href="~/general-pest-control.cshtml#nav-mosquito" class="btn btn-p btn-arrow">Read More</a>
On another page I have 7 tabs for each of the 7 links in the home page. when home page links are clicked I want to be redirected to the other page and open the specific tab.
<nav>
<div class="nav nav-tabs tabs-pest" id="nav-tab" role="tablist">
<a name="top"></a>
<a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>
</div>
</nav>
<div class="tab-content py-3 px-3 px-sm-0" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-mosquito" role="tabpanel" aria-labelledby="nav-mosquito-tab">
<div class="row">
<p>text></p>
</div>
</div>
</div>
At the moment only the first tab is opened on click of home page link. How do I open tabs ?
Do I need jquery?
I tried with this one.
But it didn't work
var tabName = (window.location.href.match(/[?&]tab-name=[^&$]+/i) || '=').split('=')[1];
if (tabName.length)
$('#nav-tabContent .tab-pest[href="~/general-pest-control.cshtml' + tabName + '"]').tab('show');
Try with localStorage:
Save id of clicked link in localstorage:
<a id="nav-mosquito-tab">
$("body").on("click","a",function(){
localStorage.setItem("clickedTab",$(this).attr("id"));
});
Give the same id as before in page that contains tabs. And do click on the tab using .click()
<a class="tab-pest active" id="nav-mosquito-tab" data-toggle="tab" href="#nav-mosquito" role="tab" aria-controls="nav-mosquito" aria-selected="true"><img src="~/Images/tab-mosquito.png" /><span>Mosquito</span></a>
$(document).ready(function(){
var tab = localStorage.getItem("clickedTab");
$("#"+tab).click();
});
All you have to do is add an attribute target="_blank" in the anchor tag as shown below:
I will open this link in new tab
I dont know why it isn't executable here. But here is a JSFiddle link for the same.
Here is a reference link for the same.
Is there a way to do the following
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
<div class="tab-pane" id='extra'> .... </div>
</div>
so there is another tab pane called #extra, but I don't want it to have a link as a tab, but I do want it to be toggleable by some other event
as bootstrap tabs.js works from trigger a tab('show') on a link and not on the pane itself, how do I trigger a tab pane without working on a tab?
note: I aware that the basic operation it does it doing a show() and hide() on the tab pane, but I feel that doing all this manually inhibits me from using callbacks, etc
You could add the tab for extras and then just hide it
Add this to your nav-tabs:
<li class="hidden"><a href="#extra" role="tab" data-toggle="tab" >Extra</a></li>
Then activate from somewhere else with JavaScript:
$("#launchExtra").click(function() {
$('#myTab a[href="#extra"]').tab('show')
});
Working demo in jsFiddle
Alternatively, you could just handle the whole thing yourself. The only thing .tab('show') does is remove the active class from all the other nav-tabs and tab-content elements. And then add back the .active class on the appropriate elements.
So first remove all the active elements and then add back the active class:
$("#launchExtra").click(function() {
$(".nav-tabs .active, .tab-content .active").removeClass("active");
$("#extra").addClass("active");
});
Working demo in jsFiddle
Create a link in memory and call the tab function on it.
$('<a data-toggle="tab" data-target="#some-id"></a>').tab("show")
an anchor link is used when you want to navigate. If you dont want to navigate, use a button. But style it like a link.
<ul class="nav nav-tabs">
<li role="presentation" class="active">
<button class="btn btn-sm btn-link">Tab1</button>
</li>
</ul>
nows its a button and will not navigate. Just add any javascript you want to it.
But I recommend to use the anchor. Javascript tabs dont support history back in the browser. And its often tricky to start with ex. tab number 4 selected. I often let every tabpage be an own page. With its own route
I'm trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (code reproduced below).
The cited suggestion to stopPropagation() on the tabs anchors doesn't seem to help. Is there a better way?
<script src='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js'></script>
<link href='http://netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css' rel="stylesheet" type="text/css"/>
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<ul class="nav nav-tabs">
<li class="active">Home </li>
<li>Profile</li>
<li>Messages</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">HOME asdfasdfsda</div>
<div class="tab-pane" id="profile">PROFILE asdfafas</div>
<div class="tab-pane" id="messages">MESSAGES asdfdas</div>
</div>
</ul>
</div>
The cited suggestion doesn't work because the .tab('show') method should be invoked on the actual tab (i.e., the link) instead of the tab pane.
So the code should be:
$('.dropdown-menu a[data-toggle="tab"]').click(function (e) {
e.stopPropagation()
$(this).tab('show')
})
Here is an updated fiddle: http://jsfiddle.net/pv2Lc/6/
Use the specific bootstrap events : the hide.bs.dropdown (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling e.preventDefault(). (doc here, list of specific bootstrap events for scrolldown components)
You can activate a special flag when the user clicks on a tab, and check that flag in the hide.bs.dropdown event on the dropdown :
$('#myTabs').on('click', '.nav-tabs a', function(){
// set a special class on the '.dropdown' element
$(this).closest('.dropdown').addClass('dontClose');
})
$('#myDropDown').on('hide.bs.dropdown', function(e) {
if ( $(this).hasClass('dontClose') ){
e.preventDefault();
}
$(this).removeClass('dontClose');
});
fiddle
(I added html ids to your example, change the selectors according to your needs)
I have several tabs and sub tabs underneath #tab1.
<ul id="main-nav-tabs" class="nav nav-tabs" style="margin-top: 5px;">
<li id="tab1"></li>
<li class="active" id="tab2"></li>
<li id="tab3"></li>
</ul>
<div id="tab-content" class="tab-content">
<div id="tab1-tab" class="tab-pane fade scrollable">
<ul class="nav nav-pills">
<li class="active"></li>
<li></li>
<li></li>
</ul>
<div id="subtab-container">
<div id="subtab-tab-content" class="tab-content">
<div id="first-subtab" class="tab-pane in active fade"></div>
<div id="second-subtab" class="tab-pane fade"></div>
<div id="third-subtab" class="tab-pane fade"></div>
</div>
</div>
</div>
<div id="tab2" class="tab-pane in active fade">
<table id="table2" class="table table-condensed"></table>
</div>
<div id="tab3" class="tab-pane fade">
<table id="table3" class="table table-condensed"></table>
</div>
Right now, I have a couple sets of data, when you select one set, it loads all the tabs with data. When you select another set, it updates all the tabs with the new data.
When it loads, I have #Tab2 as the main default active tab. When I click #tab1, I want #first-subtab to be the default active tab, but it always goes back to the last sub tab clicked from the last set of data.
For example, I load data, it defaults to #tab2, and I click #tab1 -> third-sub tab. When I load another set it defaults to #tab2, I click #tab1-> INSTEAD OF GOING TO #first-subtab, IT GOES TO #third-subtab because I clicked it last.
I've tried to set the #first-subtab to default with the following:
$('#tab1').click(function(){
$('#third-tab').removeClass('li.active');
$('#first-tab').addClass('li.active');
});
I've also tried to show/hide accordingly, but nothing will force the #first-subtab to be default... Any suggestions?
My complete html is 197 lines. When I use the google developer tools, and I've clicked on #first-subtab, the one that I want to be active, it's under the following:
html -> body -> div.layout.layout-vertical -> div#views.visible -> div#table-container.fill -> div#tab-content.tab-content -> div#tab1.tab-pane.fade.scrollable.active.in -> ul.nav.nav-pills -> li.active -> a
To get the first sub tag active
Try:
$('#tab1').click(function(){
$('.nav-pills li').removeClass('active');
$('.nav-pills li:first').addClass('active');
});
And use Guli's Suggestion to fix your tabs.
Look at Guli's fiddle for a merge of our two answers.
Your a tag has a href value to #tab2-tab :
<li class="active" id="tab3"></li>
And you div has a bad ID value (not the same that the anchor) :
<div id="tab3" class="tab-pane fade">
Fix the ID of div like this
<div id="tab3-tab" class="tab-pane fade">
and it will work perfectly.
Same thing for #tab2.
If add the answer of #Trevor it will be perfect for your needs.
JSFiddle Demo including Trevor point !
Thanks to Trevor's answer I was able to find the solution that worked for my code:
First, I had to add an id to my ul of my subtabs:
<ul id="subtabsID" class="nav nav-pills">
Then I used this to make the first-subtab the default subtab.
$("#subtabsID > .active").removeClass('active');
$("#subtabsID > :nth-child(1)").addClass('active');
$('#first-subtab').addClass('active in');