Develop Reference

Jquery Tabs Highlight When Clicking 'Next' Button

I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs
Here is the code
$(document).ready(function() {
//First we make sure to only show the first section
$('header').children('section').hide();
$('header').children('section').first().show();
//When we click a link do this..
$('nav ul li a').click(function(){
//Makes sure the active tab gets a different color
$('nav ul li a').removeClass('active');
$(this).addClass('active');
//we pull out the href E.g #tab2
var href = $(this).attr('href');
//We slide up all sections and only reveal the one we clicked E.g #tab2
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
// TRYING TO GET THE CURRENT TAB TO HIGHLIGHT WHEN I CLICK 'Next'
$('section a').click(function(){
$('nav ul li a').removeClass('active');
$('nav ul li a').addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});
});
.active{
background-color: lightgrey;
}
<nav>
<ul>
<li><a class="active" href="#tab1">Tab 1</a></li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
</nav>
<header>
<section id="tab1">
This is the content to be displayed in TAB ONE!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab2">
This is the content to be displayed in TAB TWO!
Next
</section>
<section id="tab3">
This is the content to be displayed in TAB THREE!
Next
</section>
<section id="tab4">
This is the content to be displayed in TAB FOUR!<br>
This is another line just for testing its flexibility!
Next
</section>
<section id="tab5">
This is the content to be displayed in TAB FIVE!
Next
</section>
<section id="tab6">
This is the content to be displayed in TAB SIX!
</section>
</header>
I'm trying to get the current tab buttons to highlight when you click the 'Next' button, so far they only highlight when clicking on the tabs

Here are some hints:
Use preventDefault on click handler
Use the .active class to add/remove active class
For your next button, you were adding the .active class to ALL of your links, the trick was to select the right one.
Finally, here is the fiddle
And here is the code for your next link
$('section a').click(function(e){
e.preventDefault();
$('.active').removeClass('active').parent().next().children().first().addClass('active');
var href = $(this).attr('href');
$('header').children('section').slideUp(200);
$(href).delay(200).slideDown(200);
});

Activate tab via external link (list based)

I am trying to activate a tab via a link e.g.#blahblah However, to do that, the tabs would have to be link based but they are list based. Can anyone tell me on how i can do it with my current setup? e.g. website.com/#tab2
JQUERY
$(document).ready(function() {
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li:first").attr("id","current"); // Activate the first tab
$("#content #tab1").fadeIn(); // Show first tab's content
$('#tabs a').click(function(e) {
e.preventDefault();
if ($(this).closest("li").attr("id") == "current"){ //detection for current tab
return;
}
else{
$("#content").find("[id^='tab']").hide(); // Hide all content
$("#tabs li").attr("id",""); //Reset id's
$(this).parent().attr("id","current"); // Activate this
$('#' + $(this).attr('name')).fadeIn(); // Show content for the current tab
}
});
});
HTML
<ul id="tabs">
<li>Description</li>
<li>Reviews</li>
</ul>
<div id="content">
<div id="tab1">
</div>
<div id="tab5">
</div>
</div>

I'm pretty sure that
Discription
would work.

store the current tabs after postback

I am creating an application where i want to store the current value of tabs during postback. I want to store the current value of tab using hidden variable.
what i doing wrong?
This is my jquery code:
$(document).ready(function () {
$('ul.tabs').each(function () {
tab active.
$active.addClass('active');
$content.show();
e.preventDefault();
});
});
});
This my html Code:
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tabs-1"> Content 1 </div>
<div id="tabs-2"> Content 2 </div>
<div id="tabs-3"> Content 3 </div>
</div>

I guess you are trying to append the tabs href to url, in that case use the following code rather than handling the click event on each tab.
$('.tabs').tabs({
activate: function(event, ui) {
window.location.href = window.location.href.toString().split('#')[0] + ui.newTab.find('a').attr('href');
}
});

If you postback from a control in one of the tabs, your server-side code will know what tab you came from, yes? If you want the postback to return to the same tab, set your hidden field's .Value to the appropriate index with the handler code, and have this in your jQuery ready function:
$("#tabs").tabs({ active: <%= hfLastTab.Value %> });

jQuery Tab switcher on Hover event instead of Click

I have a simple Tab switcher, right now you click on a tab to switch it but I would like to change it to a hover to switch instead.
Below is the code and the JSFiddle shows it in action right now with the click event http://jsfiddle.net/jasondavis/p95nJ/
jQuery(document).ready(function($) {
//tabs
$("ul.tabrow li:first").addClass("active").show(); //Activate first tab
$(".tab-content div:first").show(); //Show first tab content
//On Click Event
$("ul.tabrow li").click(function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab-box").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
If you can help I would really appreciate it. I do NOT want to use jQueryUI
The HTML
<div class="tab-wrap">
<ul class="tabrow">
<li class="">Tags</li>
<li class="">Recent Articles</li>
<li class="active">Tools</li>
</ul>
<div class="tab-content">
<div id="tab_tags" class="tab-box" style="display: none; ">
<div class="taglist">
<ul id="tag-list">
<li>PHP</li>
<li>Personal</li>
<li>Wordpress</li>
</ul>
</div>
<div class="clear">
</div>
View All Tags →
</div>
<div id="tab_recent" class="tab-box" style="display: none; ">
<ul>
<li class="widget">WordPress Custom Editor Quicktag Buttons</li>
<li class="widget">Welcome to CodeDevelopr</li>
</ul>
</div>
<div id="tab_tools" class="tab-box" style="display: block; ">
Coming Soon. In the mean time subscribe to the RSS Feed
</div>
</div>
</div>

You should use .hover method. See http://jsfiddle.net/p95nJ/1/
$("ul.tabrow li").hover(function() {
$(this).addClass("active"); //Add "active" class to selected tab
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
}, function() {
$("ul.tabrow li").removeClass("active"); //Remove any "active" class
$(".tab-box").hide(); //Hide all tab content
return false;
});

Change
$("ul.tabrow li").click(function() {})
to
$("ul.tabrow li").hover(function() {})

$("ul.tabrow li").hover(function() { $(this).find("a").click();});

Problem with simple jQuery Tabs

I have a very simple jquery tabs functions that looks like this :
$(document).ready(function() {
//Default Action
$(".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 rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
return false;
});
});
and the HTML for it is :
<div class="container">
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab2" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab3" class="tab_content">
<h2>Content</h2>
</div>
<div id="tab4" class="tab_content">
<h2>Content</h2>
</div>
</div>
</div>
What im trying to do here is add another tab navigation, so bacically repat the ul tag with content in it but different class so I can have something like this :
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<ul class="markers">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
..and whenever I click on any of the list it will affect in other group.
Any help much appreciaated.
Thank you for your help in advance.
Dom

you sholud use a class name or id or an element to use fadein() like this
$("#id").fadeIn("slow");
but in your code you are trying to use href attribute .
here.................
var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active content
i think you can't use like that
http://api.jquery.com/fadeIn/

try to put a class for <a> tag a grab that tag using the class identifier
as
var activeTab = $(this).find("a.classname").attr("href");
it will only affect the tags whose class is matched with the one you specified