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.
Related
There are 4 tabs. i need the content of the 4 tabs should be hidden i.e; the content should visible only when the particular tab is clicked. if 1st tab is clicked, only then the content should be visible.
You can try this.
$('.tab_wrpaper').on('click',".tab > li",function(e){
e.preventDefault();
var data_id = $(this).attr('data-id');
$(".tab li").removeClass("nav-tab-active"); // this is for tab
list item . to remove active class
$(this).addClass("nav-tab-active"); // this is for tab list item
. to add active class to the clicked list
$(".tab-content .tab-pane").removeClass("active"); // this is
for tab content . to remove active class
$(".tab-pane[data-id='tab_" + data_id +
"']").addClass("active"); // this is for tab content . to add
active class
});
<div class="tab_wrapper">
<div class="tab">
<li data-id="tab_a">Tab A</li>
<li data-id="tab_b">Tab B</li>
</div>
<div class="tab-content">
<div class="tab-pane" data-id="tab_a">Content A</div>
<div class="tab-pane" data-id="tab_b">Content B</div>
</div>
</div>
I have a large 3D carousel filling up most of the page. I want it to slide down off the page on a click event while another div slides up to take the same position.
Essentially, there will be three carousels (each different in amount of slides and with unique content), and they'll each have their own corresponding button to slide the current div down off screen and reveal the clicked div.
This is what I'm working with so far: http://werdnaworks.com/DEMO/
You can set each <div>'s position to absolute then animate the top property with jQuery:
animate({top: 'value'}, 'slow'};
sample html markup:
<ul>
<li>Carousel 1</li>
<li>Carousel 2</li>
<li>Carousel 3</li>
</ul>
<div id="carousel-1">Carousel 1</div>
<div id="carousel-2">Carousel 2</div>
<div id="carousel-3">Carousel 3</div>
jQuery:
$('li').click(function(){
var ind = $(this).index();
$('div').each(function(index, element){
if(index == ind){
$(this).animate({top: 0},'slow');
}else{
$(this).animate({top: '100%'},'slow');
}
});
})
And here is the sample fiddle.
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');
}
}
My html for a tabbed menu and its content:
<div class="tab-menu"> <!-- menu -->
<ul>
<li>link to tab 1</li>
<li>link to tab 2</li>
<li>link to tab 3</li>
</ul>
</div>
<div class="tab-wrapper"> <!-- content -->
<!-- BEGIN FIRST TAB -->
<div id="tab1" class="tab">first tab content</div>
<div id="tab2" class="tab">second tab content</div>
<div id="tab3" class="tab">third tab content</div>
</div>
... and the script to make the menu work is
// Displays the first tab when
$(".tabs").each(function(){
$(this).find(".tab").hide();
$(this).find(".tab-menu li:first a").addClass("active").show();
$(this).find(".tab:first").show();
});
$(".tabs").each(function(){
$(this).find(".tab-menu a").click(function() {
$(this).parent().parent().find("a").removeClass("active");
$(this).addClass("active");
$(this).parent().parent().parent().parent().find(".tab").hide();
var activeTab = $(this).attr("href");
$(activeTab).fadeIn();
return false;
});
});
The menu works when user clicks a tab. This means the menu opens up with the first <div> visible by default and when the user clicks another tab, that corresponding <div> appears just as expected. However, when I type in the url mysite/path#tab2, it still opens up with tab1 open. What do I need to do to make it open with tab2? Specifically, how do I access the url and extract the label? I want to do this in javascript
EDIT: It seems document.location.href provides the full url. How do I parse and extract the label from this url?
When the page is loaded, check the location.hash property and behave consequently:
$(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
Better than that, don't register any click listener at all, and just use the hashchange event:
$(window).hashchange(function() {
$(".tab").hide();
$(".tab-menu a").removeClass("active");
$(location.hash).show();
$(".tab-menu a[href='" + location.hash + "']").addClass("active");
});
the jquery code is like this:
$(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;
});
});
and the tabs:
<ul class="tabs">
<li>Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>
whenever the page loads the 1st tab is opened 1st. but if i want the 2nd tab to show, then how can i do that. like from inside a function
im loading the page like: window.location="display.php";
when loaded i want the 2nd tab to open how to do that?? also from another function if i want the 1st tab to show how to do that?
thanks in advance..
do it like this,
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
var index = $("ul.tabs li.active").show().index();
$(".tab_content").eq(index).show();
//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;
});
});
then on the tabs (li) on the html, set an active like,
<ul class="tabs">
<li class="active">Gallery</li>
<li>Submit</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<!--Content-->
</div>
<div id="tab2" class="tab_content">
<!--Content-->
</div>
</div>