I'm a javascript noob and I'm wondering how do I implement the answer to this question?
Twitter Bootstrap Tabs: Go to Specific Tab on Page Reload or Hyperlink
I want to use this code on the same page that the tabs are located....
<script type="text/javascript">
// 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;
})
</script>
Where inside the page containing the tabs should I plugg this in.
Again, so sorry for being such a noob.
Try wrapping the code in the $(document).ready() function
$(document).ready(function() {
//your code here...
});
What you have above won't work as the DOM won't be ready when it runs. Using the $(document).ready() function will delay execution until the dom has loaded. It can go pretty much anywhere in the page containing the tabs. Some people think it should go within the head section, some think it should go at the end. But read here for more in-depth answers on that: Where do I put the $(document).ready()?
See: http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
Bootstrap 3 solution:
<script type="text/javascript">
$(function() {
// 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
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
window.location.hash = e.target.hash;
});
});
</script>
