Activate tab via external link (list based) - javascript

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.

Related

Move from to a specific tab in another page

I have this code:
<ul id="tabsss">
<li class="underUl"> - History</li>
<li class="underUl"> - The Concept</li>
<li id="cst1" class="underUl"> - Why Choose CST?</li>
<li id="management1" class="underUl">- Management</li>
<li id="department1" class="underUl">- Department</li>
</ul>
In another page I have these <div>
<div class="tab-pane active" id="History">test</div>
<div class="tab-pane" id="Concept">test1</div>
<div class="tab-pane" id="Choose_CST">ssss</div>
<div class="tab-pane" id="Management">ssss</div>
<div class="tab-pane" id="Department">ssss</div>
I want to go to the specific tab in the other page. Right now it's only opening the first one only.
Aany help? Thanks in advance.
You'll need to add some javascript when loading the second page.
Something like :
if (window.location.hash == "History"){
$('.tab').hide(); //hide all other tabs
$('#History').show();
}
If you have your tabs on the about page, it could be done like this :
var currentTab = window.location.hash;
$('a[href="#'+currentTab+'"]').tab('show');
I read your question again, it can be easily achieved using JavaScript:
$(document).ready(function(){
url_params = window.location.hash;
tabParams = $('a[href="' + url_params + '"]');
console.log(tabParams);
console.log(url_params);
if (tabParams.length === 0)
{
//Activate first tab
//Show first tab content
}
else
{
tabParams.click();
}
});

jQuery Tab Menu Set Active Menu and load the content

I have jQuery tab menu call ajax.
Menu is working perfect, but now I want when page loaded it always show the first tab to be loaded (means active).
You can see the fiddle here: https://jsfiddle.net/waspinator/rw8ujfg3/
<ul class="nav nav-tabs tabs-up " id="friends">
<li active> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
<div class="tab-content">
<div class="tab-pane active" id="contacts">
</div>
<div class="tab-pane" id="friends_list">
</div>
<div class="tab-pane urlbox span8" id="awaiting_request">
</div>
</div>
JS
$('[data-toggle="tabajax"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
});
In this case, I want Contact content loaded on page loaded. How can set this?
$('#contacts_tab').trigger('click'); if you are allowed to use the id.
This should work. Just abstract the function, and bind it to the event, but also call it on load with the first tab selected to call it on. (EDIT: Sorry I got the spacing on your function wrong before because I mis-copied it. Also, tested it and changed a few things to work out a kink or two.)
function doAjaxStuff(event, tab) {
var $this = tab || $(this)
var $this = tab || $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$this.tab('show');
return false;
}
doAjaxStuff(null, $('.nav-tabs li:first-child a'))
$('[data-toggle="tabajax"]').click(doAjaxStuff);

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

make tab active, if tab class has active class

need help with active class.
i use this code to create simple tabs. all works fine.
but i can't get this code to work with "active class" as i need.
the code now select the first tab and make him active.
i want to add by myself the active class code to the div like:
need help to make this work.
Thanks
<ul class='tabs'>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1'>
<p>Hi, this is the first tab.</p>
</div>
<div id='tab2' class='active'>
<p>This is the 2nd tab.</p>
</div>
<div id='tab3'>
<p>And this is the 3rd tab.</p>
</div>
and here is the JS code. the problem as i see in the "$active"
jQuery(document).ready(function($) {
$('.info-tabs').each(function(){
// For each set of tabs, we want to keep track of
// which tab is active and it's associated content
var $active, $content, $links = $(this).find('a');
// If the location.hash matches one of the links, use that as the active tab.
// If no match is found, use the first link as the initial active tab.
$active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
$active.addClass('active');
$content = $($active[0].hash);
// Hide the remaining content
$links.not($active).each(function () {
$(this.hash).hide();
});
// Bind the click event handler
$(this).on('click', 'a', function(e){
// Make the old tab inactive.
$active.removeClass('active');
$content.hide();
// Update the variables with the new link and content
$active = $(this);
$content = $(this.hash);
// Make the tab active.
$active.addClass('active');
$content.show();
// Prevent the anchor's default click action
e.preventDefault();
});
});
});
In your each loop, you are iterating using a selector .info-tabs
$('.info-tabs').each( //some stuff here )
But i dnt see any info-tabs class anywhere.
So check your html content first.

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

Categories

Resources