We Keep Coding

two tab switching in one page not working

I want to create two tab switching independent to each other in one page. This code here only allows tab switching one at a time and the content of the other tab that is not active is hidden.
HTML:
//FIRST TAB
<ul id="tab">
<li>OPTION 1</li>
<li class="select">OPTION 2</li>
</ul>
<div class="content_wrap disnon">
<p>●●●●●111</p>
<p>●●●●●222</p>
</div>
<div class="content_wrap">
<p>●●●●●111</p>
<p>●●●●●222</p>
<p>●●●●●333</p>
</div>
//SECOND
<ul id="tab">
<li class="select">OPTION A</li>
<li>OPTION B</li>
</ul>
<div class="content_wrap">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
<p>●●●●●CCC</p>
<p>●●●●●DDD</p>
</div>
<div class="content_wrap disnon">
<p>●●●●●AAA</p>
<p>●●●●●BBB</p>
</div>
JScript:
$(function() {
$("#tab li").click(function() {
var num = $("#tab li").index(this);
$(".content_wrap").addClass('disnon');
$(".content_wrap").eq(num).removeClass('disnon');
$("#tab li").removeClass('select');
$(this).addClass('select')
});
});

There are a few things to check here first.
Both of these tabs have the same id. ID's are supposed to be unique, say tab1 and tab2.
It would be better if you could show us the css of this file.
However if my assumption is correct that
tab1 -> click -> show tab1 content AND
tab2 -> click -> show tab2 content.
The code is as follows.
// USING EITHER HTML5 DATA TAGS OR INDIVIDUAL ID'S
<ul class="tab" data-tab="1"> ... </ul>
<ul class="tab" data-tab="2"> ... </ul>
<div id="tabContent1" class="tabContent"></div>
<div id="tabContent2" class="tabContent" style="display:none"></div>
// SET NOT TO DISPLAY WHEN FIRST ACTIVE
<script>
$('.tab').on('click',function() {
// SELECT CLICKED TAB'S DATA (ie 1 / 2) IN THIS CASE
var tab = $(this).data('tab');
// HIDE ALL OTHER tabContent
$('.tabContent').hide();
// SHOW ONE TAB
$('#tabContent' + tab).show();
});
This has been simplified to easily be expandable for more than one tab. Simply adding more uls & divs will easily create a tab switching layout.

How to open a bootstrap tabs using a link?

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.

removeClass() when div is closed

I am having trouble with removing a class from an element when a separate div is closed.
You can see from my code below and my Fiddle
I have a jquery tabbed menu going that starts off with nothing open by default. When you click on a tab, the content is opened and the tab is highlighted. However if you click that same tab again and close the content the tab remains highlighted.
I have tried removeClass but with no success.
JS
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).slideToggle();
});
});
HTML
<div id="tabs-container">
<div class="tabs-menu">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
<div class="tab">
<div id="tab-1" class="tab-content">
Hello
</div>
<div id="tab-2" class="tab-content">
Number Two
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
<div id="tab-4" class="tab-content">
Bye
</div>
</div>
</div>

Use the toggleClass function to add/remove the class
$(this).parent().toggleClass("current");
demo:http://jsfiddle.net/Us8uc/6747/

Bootstrap tab activation with JQuery

I have the following code:
<ul class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
And the following script:
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.tab-pane a[href="#' + tab + '"]').tab('show');
};
In this case when the page is ready, the second tab will be activated but I always get a JavaScript error in the line $('.tab-pane a[href="#' + tab + '"]').tab();
Can anyone help me, please?

Applying a selector from the .nav-tabs seems to be working:
See this demo.
$(document).ready(function(){
activaTab('aaa');
});
function activaTab(tab){
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
I would prefer #codedme's answer, since if you know which tab you want prior to page load, you should probably change the page html and not use JS for this particular task.
I tweaked the demo for his answer, as well.
(If this is not working for you, please specify your setting - browser, environment, etc.)

Perform a click on the link to the tab anchor whenever the page is ready i.e.
$('a[href="' + window.location.hash + '"]').trigger('click');
Or in vanilla JavaScript
document.querySelector('a[href="' + window.location.hash + '"]').click();

This one is quite straightforward from w3schools: https://www.w3schools.com/bootstrap/bootstrap_ref_js_tab.asp
// Select tab by name
$('.nav-tabs a[href="#home"]').tab('show')
// Select first tab
$('.nav-tabs a:first').tab('show')
// Select last tab
$('.nav-tabs a:last').tab('show')
// Select fourth tab (zero-based)
$('.nav-tabs li:eq(3) a').tab('show')

<div class="tabbable">
<ul class="nav nav-tabs">
<li class="active">AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane fade active in" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
</div>
Add active class to any li element you want to be active after page load.
And also adding active class to content div is needed ,fade in classes are useful for a smooth transition.

Add an id attribute to a html tag
<ul class="nav nav-tabs">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<div class="tab-content" id="tabs">
<div class="tab-pane" id="aaa">...Content...</div>
<div class="tab-pane" id="bbb">...Content...</div>
<div class="tab-pane" id="ccc">...Content...</div>
</div>
Then using JQuery
$("#tab_aaa").tab('show');

Having just struggled with this - I'll explain my situation.
I have my tabs within a bootstrap modal and set the following on load (pre the modal being triggered):
$('#subMenu li:first-child a').tab('show');
Whilst the tab was selected the actual pane wasn't visible. As such you need to add active class to the pane as well:
$('#profile').addClass('active');
In my case the pane had #profile (but this could have easily been .pane:first-child) which then displayed the correct pane.

Works fine on Bootstrap 5.1.3.
$('#nav-profile-tab').click();

why not select active tab first then active the selected tab content ?
1. Add class 'active' to the < li > element of tab first .
2. then use set 'active' class to selected div.
$(document).ready( function(){
SelectTab(1); //or use other method to set active class to tab
ShowInitialTabContent();
});
function SelectTab(tabindex)
{
$('.nav-tabs li ').removeClass('active');
$('.nav-tabs li').eq(tabindex).addClass('active');
//tabindex start at 0
}
function FindActiveDiv()
{
var DivName = $('.nav-tabs .active a').attr('href');
return DivName;
}
function RemoveFocusNonActive()
{
$('.nav-tabs a').not('.active').blur();
//to > remove :hover :focus;
}
function ShowInitialTabContent()
{
RemoveFocusNonActive();
var DivName = FindActiveDiv();
if (DivName)
{
$(DivName).addClass('active');
}
}

Controlling visibility of 2 divs simultaneously

I'm trying to use a tabbed interface to display content on a website. The first set of divs is the content (text) and the second is an associated image in a div outside the div containing the text as follows:
<div id="side-img-container">
<div class="side-img" id="image_1"><img src="image1.jpg" /></div>
<div class="side-img" id="image_2"><img src="image2.jpg" /></div>
<div class="side-img" id="image_3"><img src="image3.jpg" /></div>
<div class="side-img" id="image_4"><img src="image4.jpg" /></div>
<div class="side-img" id="image_5"><img src="image5.jpg" /></div>
</div>
<div id="content>
<ul class="tabs">
<li>Tab 1</div>
<li>Tab 2</div>
<li>Tab 3</div>
<li>Tab 4</div>
<li>Tab 5</div>
</ul>
<div class="tab_container">
<div class="tab_content" id="tab_1">Content 1</div>
<div class="tab_content" id="tab_2">Content 2</div>
<div class="tab_content" id="tab_3">Content 3</div>
<div class="tab_content" id="tab_4">Content 4</div>
<div class="tab_content" id="tab_5">Content 5</div>
</div>
</div>
This uses the following Jquery to make the tabs work:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Is there any way the above javascript can be added to/adapted so that the corresponding image tab is displayed when a content tab is displayed ie: tab_1 and image_1 etc. ?

First of all, your HTML is invalid - you're closing <li> list items with </div> tags. You've also forgotten to close the quote surrounding the #content element's id attribute value.
The original JavaScript code isn't particularly efficient, so we might as well rewrite it. Using this code, you do not need each of the tab content to have a class attribute, which certainly lightens up the HTML quite a bit:
// Select all of the tab contents, then hide them
// Cache elements that need to be reused
var tabContents = $(".tab_container, #side-img-container").children().hide(),
tabs = $("ul.tabs li");
// Show the first tab's content, and add in the active class
tabs.first().addClass("active");
tabContents.filter(':first-child').show();
// Attach click event handler
tabs.click(function() {
// Cache the clicked on tab element
var $this = $(this),
// Obtain the element index number
activeTab = $this.index() + 1;
// Only change tabs if the clicked tab isn't active
if (!$this.hasClass('active')) {
// Remove the 'active' class from the original anchor and add it to the current one
$this.addClass('active').siblings().removeClass('active');
// Hide all of the other tabs and fade in the active one
tabContents.siblings().hide().filter(':nth-child(' + activeTab + ')').fadeIn();
}
return false;
});
See a simple demo of this here: http://jsfiddle.net/ND7nU/

Try this :
$('div.side-img').hide();
$('div.side-img:first').show();
$("ul.tabs li").click(function() {
$('div.side-img').eq($(this).index()).show();
// remaining code
}

Check this example on jsfiddle.net

Bit quick and dirty from the top of my head:
var s = activeTab.attr('id');
var num = s.substr(4, 1);
var imgstr = "#image-" + num;
$(".side-img").hide();
$(imgstr).show();
Edit: You can use this anywhere in the tab click event handler.
Edit 2: var s = etc Fix.