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.
Related
I have a button in my index page when clicking on that button I need to open a specific tab section of another page. the button is on one page and the tab is on the second page.
I have multiple tabs on the 2nd page but only writing here 1 tabs that one I need to open when is clicked from home page
Page 1 - Where I have a button
<p>View Example Worksheet</p>
Page 2 - tabs exist
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link " data-toggle="tab" href="#w1">Worksheet</a>
</li>
<div id="w1" class="container tab-pane fade"><br>
<div class="container">
<div class="row">
<div class="col-12 col-sm-11">
<p class="f-15 gry2">The primary use of this worksheet is to provide a detailed checklist that will facilitate precise development of specifications with drawings, to ensure that all parties are talking about the same type and quality of building.</p>
<p>
</div>
</div>
</div>
</div>
Firstly this is not right way for tabs UI.
But if you want use
<script>
$(document).ready(function(){
$(".btn_readmore2").click(function(){
$("#w1").load("demo_test.txt");
});
});
</script>
other way find function is useful with is visible option you can check.
if($("#w1:visible")){
write you show action code here
}
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??
So I'm using bootstrap for my website and I have many div's on each page with a dropdown on each that change the information inside the div from a chart to a table and vise-versa. This works fine except when the user selects an option from the drop down the screen seems to "jump", putting that div at the top of the screen. I found a similar issue for someone else saying it has something to do with the anchor tag(#), but I believe I need mine since the drop down does refer to something.
DROPDOWN:
<div class="dropdown">
<button class="btn btn-warning dropdown-toggle btn-xs" type="button" id="dropdownMenuGraphOneSmall" data-toggle="dropdown" aria-expanded="true">Graph One Options<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenuGraphOneSmall">
<!--DROPDOWN MENU-->
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneData">Data</a>
</li>
<li role="presentation">
<a role="menuitem" tabindex="-1" href="#graphOneChart">Chart</a>
</li>
<li role="presentation">
<a data-toggle="modal" data-target="#enlargeGraphOneModal" role="menuitem" tabindex="-1">Maximize</a>
</li>
<li role="presentation">
<a class="collapse-link" role="menuitem" tabindex="-1" href="#graphOneCollapse">Collapse</a>
</li>
</ul>
</div>
CONTENT IT CALLS:
<div class="content active row" id="graphOneChart">
............
</div>
<div class="content" id="graphOneData">
............
</div>
To keep the page from jumping, you can remove the href="" altogether, and just keep the a tag empty like this <a>, then it wont jump.
If you have to keep the href tag, you can use the e.preventDefault() in your click or on method.
When you use an anchor tag, <a>, it is going to automatically go to the location that the href tag is pointing to. If your link is pointing to an id on the page, the link is going to scroll the screen to the element the link is pointing to. If you want to use the link to call a function, leave the href attribute empty, href="".
If you use a hash # in an anchor, the browser will automatically scroll to the element with the corresponding id.
For example, clicking on:
Data
Will cause the page to jump to:
<div id="graphOneData"></div>
To stop this happening, either change the id of the div or the href of the anchor.
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
Using Bootstrap modal that contains tabs. The modal is called from a php generated table of gallery names.
Table Data
<td>
<a href="#" class="galName" data-target="#myModal" data-toggle="modal" id="update_<?php echo $gal['id']; ?>" >
<?php echo $gal['name']; ?>
</a>
</td>
The modal opens and the first tab is selected on initial fire. If I navigate to another tab close the modal and select a different gallery the modal opens to the last tab that was open.
How do I make sure that when the modal is opened, it always opens to the first tab?
Modal Tabs
<ul id="myTab" class="nav nav-tabs">
<li class="active">
Home
</li>
<li class="">
<a id="uploadRevision" href="#upload" data-toggle="tab">Upload Revision</a>
</li>
<li class="">
Edit Revision
</li>
</ul>
.galName fires an initUpdate function in effort to set first tab as default. It sets the tab but tab content is not show.
function initUpdate()
{
$('#myModal a:first').tab('show');
}
Thanks for the help.
Found the solution. Must remove the class="active" from both tab and tabContent. Thanks to #merv - https://stackoverflow.com/a/11762931/1214858
Simple; use class "active" to show particular tab on load.
Like below:
<!-- Nav tabs -->
<!-- content tabs -->
Remove class="tab-pane active" in li of above on nav of tab and content which you want to make it in active.