I have following bootstrap tabs code which is working when I click on the tab but I want to open the tab when I click on a link which I have created using ul > li > a
but unfortunately it's not working. how can i do this?
html code:
<ul>
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
Js Code:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Give your <ul> a class name, like alt-nav-tabs, and then copy the existing navigation JS code. It would look something like this:
HTML:
<!-- Add class to your <ul> element -->
<ul class="alt-nav-tabs">
<li>tab1</li>
<li>tab2</li>
</ul>
<div class="container">
<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">Section 1</li>
<li>Section 2</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>I'm in Section 2.</p>
</div>
</div>
</div>
</div>
JS:
<script>
// Javascript to enable link to tab
var hash = document.location.hash;
var prefix = "tab_";
if (hash) {
$('.nav-tabs a[href='+hash.replace(prefix,"")+']').tab('show');
}
// Change hash for page-reload
$('.nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
// Copied (modify class selector to match your <ul> class): Change hash for page-reload
$('.alt-nav-tabs a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash.replace("#", "#" + prefix);
});
</script>
Persistent tab visibility:
Based on the following comment, you have a tab that is showing no matter which tab is active...
one my give link I see that on a random tab a class called tab-visible
is added automatically.
To resolve this, you can use the following code to remove this class after the HTML loads:
<script>
$(document).ready(function() {
$('#tab-bem-estar-e-ambiente').removeClass('tab-visible');
});
</script>
Place this script in the <head> section, and you should be good to go!
Alternatively...
I noticed you tried to override the original tab-visible behavior. As it is now, the tab with the tab-visible class will never be visible, even when that tab is clicked on and active. If you never intend to use the tab-visible class on your tabs, you could just remove the style from the original CSS document here:
http://futura-dev.totalcommit.com/wp-content/themes/futura-child/style.css?ver=4.9.8
Find that CSS file in your hosted files, search for .tab-visible, and simply remove the class.
Related
I'm trying to add a Bootstrap tab panel goes like this:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">First Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">Second Panel</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Third Panel</a>
</li>
</ul><!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<p>First Panel</p>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<p>Second Panel</p>
</div>
<div class="tab-pane" id="tabs-3" role="tabpanel">
<p>Third Panel</p>
</div>
</div>
Now I need to give link to users to see the panes like this:
https://sitename.com/page#tabs-2
But this won't work because the tab-pane with an id of tabs-2 does not have the .active class.
However, if I try loading https://sitename.com/page#tabs-1 The page properly redirects me to tab-pane with an id of tabs-1 (because it has .active class by default)
So how can I redirect users to different tab panes correctly?
You don't really need to check the fragment to switch between those tabs.
1) Import jQuery from here or:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
2) Add this part to your code.
<script>
$(document).ready(function () {
$('.nav-tabs a').click(function () {
$(this).tab('show');
});
});
</script>
I already started answering your old question before you deleted it, but here is it again.
I didn't understood what you were trying to achieve, so I just looked into the code and made my version, its not the best but it works.
This is an onClick event handler, it gets executed on a click in your nav and changes the active classes.
// onClick event handler, gets executed on click
$(".nav-link").on("click", (e) => {
// store clicked element
const listItem = e.target;
// get hash
const hash = e.target.hash;
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to list item and tab panes
$(listItem).add(hash).addClass("active");
});
This part gets executed when you reload your page. You need to change your HTML for this to work, so remove the active class from nav-link and give every link an additional class (tabs-1, tabs-2 and tabs-3).
// when page is reloaded
$(document).ready(() => {
// get current hash
const hashList = window.location.hash;
const hashItems = hashList.slice(1);
// remove all active classes
$(".nav-link, .tab-pane").removeClass("active");
// add active class to nav-link and pane
$(hashList).add(`.${hashItems}`).addClass("active");
});
Both snippets need to be included in your script tag of course, also you need to import jQuery, if not already happened.
I have an about page with different tabs that I want to link to individually through my footer. I've checked out other solutions to this but I'm not sure of two things. I've tried to use the following javascript to solve this, but I'm not sure how to configure what is here:
A) How do I configure the JavaScript to work with my HTML?
B) Do I need to duplicate the following JS for each tab on the page?
// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('/info#advertise-tab')) {
$('.nav-tabs li a[href="info' + url.split('#')[1] + 'advertise-tab"]').tab('shown.bs.tab');
}
// Change hash for page-reload
$('.nav-tabs li a').on('shown.bs.tab', function (e) {
window.location.hash = e.target.hash;
})
My page's view:
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" id="advertise-li">Advertise</li>
<li role="presentation" id="legal-li">Legal</li>
</ul>
<div class="tab-content" id="infoTabContent">
<div role="tabpanel" class="tab-pane fade" id="advertise-tab">
<p>stuff</p>
</div>
<div role="tabpanel" class="tab-pane fade" id="legal-tab">
<p>other stuff</p>
</div>
</div>
Page footer links:
Advertise
Legal
Here is the jsfiddle
I have two pages. My main page contains links in different places within this page to perform actions such as Edit profile, Change my Password, Upload a profile picture etc.
Main page 'index.html'
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
My second page 'accounts.html' uses Bootstrap Nav Tabs.
<ul class="nav nav-tabs">
<li class="active"> Edit my profile</li>
<li class="">Change my Password</li>
<li class="">Upload Photo</li>
</ul>
<div class="tab-pane" id="editProfile">
BARK BARK
</div>
<div class="tab-pane" id="changePassword">
WOFF WOFF
</div>
<div class="tab-pane" id="uploadPhoto">
MEOW MEOW
</div>
How do I click the link on the main page and open the correct corresponding Bootstrap Tab on the second page?
<!-- CLICK ON LINK WITHIN MAIN PAGE -->
$('#editProfile').on('click', function() {
$('body').load( "accounts.html" ).find('active').removeClass('active');
$('li.active').addClass('active');
});
I think you can use localStorage for this solution. The first, save id of the selected tab that you click on index.html into localStorage. And then, on the account.html you get value selected tab from localStorage. Here is the sample, hope to help, my friend!
--In the index.html
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
$(document).ready(function(){
$('a').on('click', function(e){
localStorage.setItem('activeTab', $(e.target).attr('id'));
window.location.replace("accounts.html");
});
});
--In the account.html
<ul class="nav nav-tabs">
<li class="active" id="lieditProfile">
Edit my profile
</li>
<li class="" id="lichangePass">
Change my Password
</li>
<li class="" id="liuploadPhoto">
Upload Photo
</li>
</ul>
<div class="tab-content">
<div id="editProfile" class="tab-pane fade in active">
<h3>Edit the profile.</h3>
</div>
<div id="changePass" class="tab-pane fade">
<h3>Change Password</h3>
</div>
<div id="uploadPhoto" class="tab-pane fade">
<h3>Upload Photo</h3>
</div>
</div>
<script>
$(document).ready(function(){
var activeTab = localStorage.getItem('activeTab');
$('li').removeClass();
$('#li'+ activeTab).addClass('active');
$('.tab-pane').removeClass('in active');
$('#' + activeTab).addClass('in active show');
});
</script>
My goal is to click in dropdown menu (div id=cssmenu) elements and display data in the using AJAX , so i made a small js code but i don't know how can i make it to load in the div i mentioned and erase the content that div displayed before.
html
<body>
<div class="container">
<div class="row">
<div class="col-md-3" >
<div id='cssmenu'>
<ul>
<li class='active'><span>Home</span></li>
<li class='has-sub'><a href='#'><span>About</span></a>
<ul>
<li><a href='#'><span>Project</span></a></li>
<li class='last'><a href='#'><span>Team</span></a></li>
</ul>
</li>
<li class='last'><a href='#'><span>News</span></a></li>
</ul>
</div>
</div>
<div class="col-md-9">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active"><a class="clickableLink" href="#tab_quick" data-url="http://localhost/bioinformatica/Main_page/Quick_search.html#qhelp">Quick Search</a></li>
<li><a class="clickableLink" href="#tab_advanc" data-url="#">Advanced Search</a></li>
<li><a class="clickableLink" href="#tab_struct" data-url="something3.txt">Structure Search</a></li>
</ul>
<div class="tab-content">
<div id="tab_quick" class="tab-pane active"></div>
<div id="tab_advanc" class="tab-pane active"></div>
<div id="tab_struct" class="tab-pane active"></div>
</div>
</div>
</div>
</div>
<div class="clearfix visible-lg"></div>
</div>
</div>
</body>
</html>
Javascript
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
var href = this.hash;
var pane = $(this);
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
});
});
For example in the Menu, when i click Home i would like it to load it's data-url attr in the div id=tabs , i.e, replacing all the contents by Home data-url. Thanks !
You can try the following:
$( document ).ready(function() {
$('#cssmenu a').click(function (e) {
e.preventDefault();
var url = $(this).data('url'); // this is the correct syntax
var pane = $(this);
$('#tabs').load(url, function(result){ // load the content directly to #tabs
pane.tab('show'); // display the tab
});
});
});
I have a web page with tabbed content. The information for each tab is pulled from a database. The tab only displays if content exists. The JS requires class="active" to be set on the first tab to allow it to load and also to change the colour of the tab to show it is the active tab.
The problem I have is that I don't know which tab will be first, as there may not be any information for the first tab, so it will not display and it will be tab 2 or 3 that will show first.
How can I say 'make this tab have class="active" if it is first'?
HTML:
<nav class="filters">
<ul class="tabs">
<li class="active">Content 1</li>
<li>Content 2</li>
<li>Content 3</li>
</ul>
</nav>
<article class="tab-content has-aside wysiwyg active" id="uniquename-tab-1">
<h1>Content 1</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-2">
<h1>Content 2</h1>
</article>
<article class="tab-content has-aside wysiwyg" id="uniquename-tab-3">
<h1>Content 3</h1>
</article>
JavaScript:
function tabs($container) {
$container.each(function() {
$('.tabs > li > a', $container).on('click', function(e) {
e.preventDefault();
var tab_id = $(this).attr('data-tab');
$('.tabs > li', $container).removeClass('active');
$('.tab-content', $container).removeClass('active');
$(this).parent().addClass('active');
$("#"+tab_id, $container).addClass('active');
});
});
}
$("ul.tabs li:eq(0)").addClass('active');
I suppose you are using Bootstrap. If so, I had a similar problem and added a call to the tab function, as stated in the usage section of their doc:
$(document).ready(function () {
$(".tabs a:first").tab('show');
}