Develop Reference

JavaScript show last tab

I've created 4 tabs and only 1 is shown at a time, but if I post something in a form in tab 4 then tab 1 becomes active but I want it to automatically show the tab that the stuff was posted in.
Here is my code:
<script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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;
});
});
</script>
<center>
<ul class="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li>Tab 4</li>
</ul>
<div class="tab_container"><br><br><br>
<div id="tab1" class="tab_content">
<center><h2>Tab 1</h2></center>
</div>
<div id="tab2" class="tab_content">
<center><h2>Tab 2</h2></center>
</div>
<div id="tab3" class="tab_content">
<center><h2>Tab 3</h2></center>
</div>
<div id="tab4" class="tab_content">
<?php
$getmessage = $_POST["message"];
if($getmessage != null) {
echo"Thanks for posting the text!";
} ?>
<center><form method="post" name="form4"><input type="text" id="form4" name="message" placeholder="Type a text here"><br><input type="submit" value="Post text"></form></center>
</div>
</div></center>
</center>
So when I submit the form in tab 4 I get to tab 1 and I manually have to go to tab 4 to see the message that my echo shows. I need it to automatic go to the tab where the form was submitted, but I don't know how to do this.

Add another input (hidden) element to your form, such as active_tab and populate it with the active tab as and when you click on the tabs. Grab that value from $_POST and set the default tab accordingly.
Step 1: add input element
<input type="hidden" name="active_tab" />
Step 2: update input's value
$("ul.tabs li").click(function() {
$('input[name="active_tab"]').val( $(this).index() );
//your remaining code as is
//...
Step 3: set default tab based on post value
$(document).ready(function() {
//Default Action
var tabNum = "<? echo !empty($_POST['active_tab']) ? $_POST['active_tab'] : 0; ?>";
$(".tab_content").hide(); //Hide all content
$("ul.tabs li").eq(tabNum).addClass("active").show(); //Activate the tab
$(".tab_content").eq(tabNum).show(); //Show the tab content

Give your form action="#tab4" (make sure page reloads). And also in your JS script you have to add code that is about to read it from url:
var hash = (window.location.hash).substr(1) || null;
if(hash == "tab4")
$(".tab_content:last").show();

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);
});

jQuery tabs: how to hide single tab?

How do I hide the tab2? I can add ID to the second li and than hide it with jQuery, but isn't there some way to do it through .tabs directly?
<div id="tabs" style="width:100%">
<ul>
<li>
<a href="#tab1">
Tab 1 Title
</a>
</li>
<li>
<a href="#tab2">
Tab 2 Title
</a>
</li>
</ul>
<div id="tab1" style="width:100%;">
content tab1
....

Try this :
$('[href="#tab2"]').closest('li').hide();

Try this:
$($("#tabs").find("li")[1]).hide()

Demo
HTML:
<div id='MyTabSelector'>
<ul>
<li>Tab 0</li>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div id="tabs-1">
Disable Tab 1<br />
JS:
(function ($) {
$.fn.disableTab = function (tabIndex, hide) {
// Get the array of disabled tabs, if any
var disabledTabs = this.tabs("option", "disabled");
if ($.isArray(disabledTabs)) {
var pos = $.inArray(tabIndex, disabledTabs);
if (pos < 0) {
disabledTabs.push(tabIndex);
}
}
else {
disabledTabs = [tabIndex];
}
this.tabs("option", "disabled", disabledTabs);
if (hide === true) {
$(this).find('li:eq(' + tabIndex + ')').addClass('ui-state-hidden');
}
// Enable chaining
return this;
};
$.fn.enableTab = function (tabIndex) {
$(this).find('li:eq(' + tabIndex + ')').removeClass('ui-state-hidden');
this.tabs("enable", tabIndex);
return this;
};
})(jQuery);
$('#MyTabSelector').tabs();

you need to hide both li as well as div to hide tab
so your jquery would be
$($("#tabs").find("li")[1]).hide();
$($("#tabs").find('#tab2')).hide();

You could try this:
//when you click a tab
$('#tabs a').click(function(){
//show hidden tabs again
$('#tabs li:hidden').show();
//hide the clicked tab
$(this).parent().hide();
});

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.

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