I'm using Bootstrap's nav-tabs with the following setup:
<ul class="nav nav-tabs">
<li class="active">Home</li>
<li>Profile</li>
</ul>
<div id="tabContent" class="tab-content">
<div class="tab-pane active in" id="home">
<form id="tab">
<label>Name:</label>
<input type="text" value="fooBar" class="input-xlarge">
</form>
</div>
<div class="tab-pane fade" id="profile">
<form id="tab2">
Home
</form>
</div>
</div>
As you can see, I have a link in my profile tab, which links to the first tab. Clicking on the anchor does change the URL in the URL bar, however it doesn't jump to the specific tab.
I then noticed that it is generally not possible to link to a tab directly, so I added the following code from Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink:
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
$('.nav-tabs a[href=#'+url.split('#')[1]+']').tab('show') ;
}
// Change hash for page-reload
$('.nav-tabs a').on('shown', function (e) {
window.location.hash = e.target.hash;
})
Now I can link to a specific tab from somewhere else, but not, if I'm on the same page where the nav-bar is. Reloading the page would then jump to the wanted tab, so I thought I could just forcefully reload the page, with the solution from Javascript: How to truly reload a site with an anchor tag?:
window.location.reload(true);
This however ended up in a reload every time I clicked on a tab, in addition it still didn't load the home tab, when clicked on the anchor.
Thus, how would I jump to a given id from another tab?
You might have been put on the the wrong foot by the other answers you mention ... it is fairly trivial to change tabs from within the same page (regardless if you're in another tab or not): you can use the basic bootstrap tab navigation Javascript for this.
First change your html a bit: add an id to your <ul class="nav nav-tabs" id="myTab">.. then add a link to your second tab:
<div class="tab-pane fade" id="profile">
<form id="tab2">
Jump to home tab (this works)
...
and add the following in your document ready:
$('#gotohome').click(function() {
$('#myTab a[href="#home"]').tab('show');
});
Working example at jsFiddle.
The given answer
$('#myTab a[href="#home"]').tab('show');
can also be used to make a JavaScript software jump to a specific tab.
Assume you want to jump to a specific tab on start by using the url:
http://myDomain/myApp#tabSomewhere
You can imagine that will work (you need to make some additional coding).
Suppose your First page is on the tabHome (you make that active with the 'active' class. When you try to go back to that page using javascript you have to remove the active class from the tabHome using:
$('li').removeClass('active');
Related
I am new to bootstrap and I am currently playing around with a tab/navigation system. This is what I have for the tabs and the tabs content so far:
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="container">
<ul class="nav nav-tabs">
<li class="nav active">A</li>
<li class="nav">B</li>
<li class="nav">C</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Questions
I want to link directly to one of the tabs. E.g. www.mysite.com/mypage#B or www.mysite.com/mypage/#B should directly open tab B.
When clicking on tabs the URL needs to change to corresponding #id to be able to get to the current tab when refreshing the page.
I got 1 to work by JS and to check for what is after # in the URL and then via php have an if statement on each nav to see if it should be active or not, and same for the tab-panes. However, that doesn't solve problem 2.
How can I solve this nicely? Or should I skip Bootstrap and just create my own navigation with some JS?
A few things first:
You tagged your question with both bootstrap-4 and bootstrap-5, but you're actually using bootstrap-3. My solution below works for Bootstrap 3, but requires changes for Bootstrap 5 that uses the data-bs-target attribute.
The version of jQuery (1.11) you're using is from 2014. I recommend using a more recent version (3.6.3).
To solve problem 1 and 2, add the following jQuery script:
var hash = window.location.hash;
$(".nav-tabs").find("li a").each(function(key, value) {
if (hash === $(value).attr('href')) {
$(value).tab('show');
}
$(value).click(function() {
location.hash = $(this).attr('href');
});
});
This will
Get the hash from the url;
Loop through each nav-tab li a element;
If the hash matches with the href attribute of one of the tabs: show it;
Attaches a click event handler on all tabs, changing the url hash using its href attribute when fired.
For other solutions, take a look at this SO question.
Okay, so I have this weird issue on my website which I might have a hard time explaining. I am working on a website which only has one page(index.html) and no scroll. I have a navbar on the left with some menu items. So when clicked on a menu item a box appears with content. As it is a single page no scroll website, I have used IDs to call those boxes. Please see the code below:
<div class="nav-content">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
when clicked on a menu item this kind of section appears on the screen.
<section class="content show background-overlay" id="about">
<div class="aboutUs">
<h1>About Us</h1>
<div class="overflow-scroll">
Lorem ipsumasfasfasfasfafafsafs
</div>
</div>
</section>
And the browser address bar shows something like this after clicking on the links:
file:///C:/Users/zak/Desktop/web/project1/index.html#home
or
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
Now I have used a modal box inside the gallery content section and after I close the modal box, the page does not stay at the gallery content section but reloads.
For example:
Modal box is here:
file:///C:/Users/zak/Desktop/web/project1/index.html#gallery
After modal is closed:
file:///C:/Users/zak/Desktop/web/project1/index.html (which is the home content section)
I want the gallery section to stay open even if I close the modal.
For the modal, I have not used any JS or jQuery. It is pure HTML and CSS. To get rid of the issue I have tried a simple jquery code:
$('#modal_close').click(function(e) {
e.preventDefault();
return false;
});
This code just stops everything working.
Can anybody tell me how to stop the page from reloading after the modal box is closed?
You can try to use hide event to make refresh.
$('#modal_close').on('hide', function() {
window.location.reload();
});
I am developing an web app. In some of the web pages I am using Twitter Bootstrap pane tabs. below is my code.
I am trying to go to a specific tab when the page reloads.
For example: when I am in the www.mywebsite.com/c.html the first active tab is 'bc' when I go to 'cc' and refresh the page it goes back to 'bc'. I want it to stay in 'cc'. I need to be able to do something like this www.mywebsite.com/c.html#cc But this does not work.
I looked at Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload? but could not find an answer that fits my code. I tried changing the class names still no luck.
<div class="wp">
<div class="widget">
<div class="tabs">
<ul class="nav nav-pills nav-justified">
<li class="active">bc</li>
<li>cc</li>
<li>lc</li>
<li>pc</li>
<li>sc</li>
</ul>
</div>
</div>
</div>
<div class="tab-content tab-content-inverse">
<div class="tab-pane active" id="bc">
...
</div>
<div class="tab-pane" id="cc">
...
</div>
<div class="tab-pane" id="lc">
...
</div>
<div class="tab-pane" id="pc">
...
</div>
<div class="tab-pane" id="sc">
...
</div>
</div>
Get the anchor part of the URL by using location.hash in your JavaScript/jQuery.
Then, append it into the following JavaScript:
document.querySelector('.nav li a[href="#lc"]').click();
You'll simply insert the value you pull using location.hash after the href= portion, which will then be clicked.
Change the value in the following Bootply example and run it to see how it works.
BOOTPLY
This worked for me. I changed the class names to tabs and the event to click event
$(document).ready(function () {
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.tabs a[href=' + hash.replace(prefix, "") + ']').tab('show');
}
$('.tabs a').on('click', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
});
You can write some code in JavaScript that will run when the page loads and check the # part of the url (window.location.hash). Take a look at the bootstrap website for how to toggle a certain tab: http://getbootstrap.com/javascript/#tabs
I'm using a twitter-bootstrap nav bar combined with tabs to load in forms via ajax (I'm using Django to serve the forms)
<ul class="nav nav-pills" id="tabs">
<li>Form1</li>
<li>Form2</li>
<li>Form3</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="form1" data-src="{% url form1 %}"></div>
<div class="tab-pane" id="form2" data-src="{% url form2 %}"></div>
<div class="tab-pane" id="form3" data-src="{% url form3 %}"></div>
</div>
This couples with the jquery:
$('#tabs').bind('show', function(element) {
paneID = $(element.target).attr('href');
src = $(paneID).attr('data-src');
$(paneID).load(src);
});
Firstly, part of me wonders whether this might be a bad idea. I can't think of a reason why but if someone could point out to me whether this method has any drawbacks I would appreciate it.
Secondly, When I navigate away from a tab, I'd like to trigger the "onunload" event for that tabs content. But I can't seem to find a way to "unload" the data from a tab when it is navigated away from.
$('#tabs').bind('hide', function(element) {
doStuff();
});
is not valid apparently. Any help/guidance appreciated.
Bootstrap tab fires an event when the tab is shown.
http://getbootstrap.com/2.3.2/javascript.html#tabs
Taken from bootstrap:
$('a[data-toggle="tab"]').on('shown', function (e) {
e.target // activated tab
e.relatedTarget // previous tab
})
You can use the relatedTarget. That is the tab that just "unloaded".
I’ve created a tabbed interface with jQuery to show/hide content.
I want to be able to link to a particular tab and allow users to bookmark the current tab they are on.
As I use IDs for each containing div I can achieve this by removing return false; from the click event but this causes the page to skip down to the containing div for the tab.
Is there a way of ensuring that the URL contains the # part of the address but prevents the page from skipping? Is there another way of approaching this problem that I haven’t come across yet?
//Get all containers with tab content
var tabContainers = $("div.tab");
//Get value of # from URL
if (window.location.hash) {
//if there's a # display the relevant tab
$(tabContainers).hide().filter(window.location.hash).show();
} else {
//Show the first tab
$(tabContainers).hide().filter(":first").show();
}
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
<div id="tabNavContainer">
<ul id="tabNav">
<li id="tab1"> Course essentials </li>
<li id="tab2"> Course details </li>
<li id="tab3"> Next steps </li>
</ul>
</div>
<div class="tab" id="a">
<h3>TAB A</h3>
</div>
<div class="tab" id="b">
<h3>TAB B</h3>
</div>
<div class="tab" id="c">
<h3>TAB C</h3>
</div>
Any help is much appreciated.
You can set window.location.hash as well as reading it:
$("ul#tabNav a").click( function () {
//Hide all tab content then display the current
$(tabContainers).hide().filter(this.hash).show();
window.location.hash = this.hash;
//prevent page from skipping but also prevents # from appearing in address bar
return false;
});
Note that this will add a page into the browser history, allowing the user to use the back and forward buttons to change the hash. You should ideally also look at handling that.