I am working on a L5 project and i am using a Jquery tab for one of its pages. I have a little menu for reaching tab contents without clicking just tabs.
<div id="aracislem" class="panel-collapse collapse">
<div class="panel-body">
<ul>
<li>Araç Arama </li>
<li>Araç Kayıt </li>
<li>İstatistik </li>
<li>Araç Takibi </li>
</ul>
</div>
</div>
Any my tab is
<script type="text/javascript">
$(document).ready(function () {
$('#tab-container').tabs({
active: $.cookie('activetab'),
activate: function (event, ui) {
$.cookie('activetab', ui.newTab.index(), {
expires: 10
});
}
});
});
</script>
<div id="tab-container" class='tab-container'>
<ul>
<li class='tab'>Araç Arama</li>
<li class='tab'>Araç Kayıt</li>
<li class='tab'>İstatistik</li>
<li class='tab'>Araç Takip</li>
</ul>
<div class='panel-container'>
<div id="aracaramatab">
Araç Arama
</div>
<div id="arackayittab">
Araç Kayıt
</div>
<div id="istatistiktab">
İstatistik
</div>
<div id="aractakiptab">
Araç Takip
</div>
</div>
</div>
When i clik to menu links i cant reach to necessary tab, link changes in the browser but does not redirect to tab also when i click to tabs, content changes but links do not change. Anybody knows what am i doing wrong ?
Check this DEMO : http://jsfiddle.net/yeyene/mktgnp3e/1/
Your problem is when you click link and after going to link (it will redirect a different page?), want to active the tab, right?
So get the url first, then get the hash, then do the active tab step.
JQUERY
$(document).ready(function () {
$("#tab-container").tabs({});
// for testing purpose
var url = "http://localhost/pages/aracislemler#arackayittab";
// use this script for getting url
//var url = window.location.href;
var hash = url.substring(url.indexOf('#'));
// trigger click to tab with url hash name
$('#tab-container a[href='+hash+']').trigger('click');
});
*Use the line var url = window.location.href; for your app, then take out the current url getting test variable.
Related
I have two pages. My main page contains links in different places within this page to perform actions such as Edit profile, Change my Password, Upload a profile picture etc.
Main page 'index.html'
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
My second page 'accounts.html' uses Bootstrap Nav Tabs.
<ul class="nav nav-tabs">
<li class="active"> Edit my profile</li>
<li class="">Change my Password</li>
<li class="">Upload Photo</li>
</ul>
<div class="tab-pane" id="editProfile">
BARK BARK
</div>
<div class="tab-pane" id="changePassword">
WOFF WOFF
</div>
<div class="tab-pane" id="uploadPhoto">
MEOW MEOW
</div>
How do I click the link on the main page and open the correct corresponding Bootstrap Tab on the second page?
<!-- CLICK ON LINK WITHIN MAIN PAGE -->
$('#editProfile').on('click', function() {
$('body').load( "accounts.html" ).find('active').removeClass('active');
$('li.active').addClass('active');
});
I think you can use localStorage for this solution. The first, save id of the selected tab that you click on index.html into localStorage. And then, on the account.html you get value selected tab from localStorage. Here is the sample, hope to help, my friend!
--In the index.html
EDIT PROFILE
CHANGE PASSWORD
UPLOAD PHOTO
$(document).ready(function(){
$('a').on('click', function(e){
localStorage.setItem('activeTab', $(e.target).attr('id'));
window.location.replace("accounts.html");
});
});
--In the account.html
<ul class="nav nav-tabs">
<li class="active" id="lieditProfile">
Edit my profile
</li>
<li class="" id="lichangePass">
Change my Password
</li>
<li class="" id="liuploadPhoto">
Upload Photo
</li>
</ul>
<div class="tab-content">
<div id="editProfile" class="tab-pane fade in active">
<h3>Edit the profile.</h3>
</div>
<div id="changePass" class="tab-pane fade">
<h3>Change Password</h3>
</div>
<div id="uploadPhoto" class="tab-pane fade">
<h3>Upload Photo</h3>
</div>
</div>
<script>
$(document).ready(function(){
var activeTab = localStorage.getItem('activeTab');
$('li').removeClass();
$('#li'+ activeTab).addClass('active');
$('.tab-pane').removeClass('in active');
$('#' + activeTab).addClass('in active show');
});
</script>
I am using Zurb Foundation 6 Tabs. I have a javascript question. Here is my html for a 3 tab layout.
<ul class="tabs" data-tabs id="myTabs">
<li class="tabs-title is-active">Tab 1 Info</li>
<li class="tabs-title" >Tab 2 Info</li>
<li class="tabs-title" >Tab 3 Info</li>
</ul>
<div class="tabs-content" data-tabs-content="myTabs">
<div class="tabs-panel is-active" id="panel1">
....
</div>
<div class="tabs-panel" id="panel2">
....
</div>
<div class="tabs-panel" id="panel3">
....
</div>
</div>
The tabs work great! However, I want to load content into Tab 3 only when clicked. I will be using ajax to load the content. Foundation 6 docs provide a javascript event that fires when ANY tab is clicked on. See below:
$('#myTabs').on('change.zf.tabs', function() {
console.log('Those tabs sure did change!');
});
I need an event to fire ONLY when panel3 is selected. How to do?
You can use condition inside 'change.zf.tabs' event, like this:
$('#myTabs').on('change.zf.tabs', function() {
if($('#panel3:visible').length){
console.log('Tab 3 is now visible!');
}
});
For Foundation 6 (current version is 6.2.1) you should use the following code to get the ID of the changed tab.
$('#myTabs').on('change.zf.tabs', function()
{
var tabId = $('div[data-tabs-content="'+$(this).attr('id')+'"]').find('.tabs-panel.is-active').attr('id');
alert(tabId);
});
Try to add condition on tab id you want to load content when it's selected, e.g :
$('#myTabs').on('change.zf.tabs', function() {
if ($(this).attr('id') == 'panel3')
{
//Load content here
}
});
Hope this helps.
I just came to this problem.
Ended using:
$(this).find('.is-active a').attr('id')
I'm having some luck with this in Foundation 6:
$('.tabs').on('change.zf.tabs', function(event, tab){
console.log(tab.children('a').attr('id'));
console.log(tab.children('a').attr('href'));
});
For Foundation 6 I used:
$("#section-tabs").on('change.zf.tabs', function (event, tab) {
var tabId = tab.attr("id");
})
I am trying to make a jquery tab that remembers which tab was last when the page refresh. I have found the fiddle below and adapted to my needs in php but i am novice with jave script and i don`t fully understand how it works so i can not figure it out hou could i do in javascript or javascript combined with php to remember what tab was when page refreshed.
HTML:
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<div id="tabs">
<ul>
<li>
Tab A
</li>
<li>
Tab B
</li>
<li>
Tab C
</li>
<li>
Tab D
</li>
</ul>
<div id="a">
Content of A
</div>
<div id="b">
Content of B
</div>
<div id="c">
Content of C
</div>
<div id="d">
Content of D
</div>
</div>
JavaScript:
$('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
Fiddle
You have to set tab's or link's hash in your URL, then jQuery UI will do automaticaly, heres your jquery code example
$(function(){
$('#tabs')
.tabs()
.addClass('ui-tabs-vertical ui-helper-clearfix');
$("#tabs>ul>li>a").on('click', function(event) {
window.location.hash = event.target.hash;
})
});
NOTE: This will not work in jsfiddle
When the anchor is clicked, add a fragment identifier to the URL e.g. http://example.com/#b. Then on page load you can check for this and show the correct tab.
Here is a fiddle that demonstrates it but doesn't work on fiddle because it needs to change the URL: http://jsfiddle.net/rgRp3/5/
$('a').click(function() {
window.location.hash = $(this).attr('href').replace('#', '');
});
$(document).ready( function() {
var selected = window.location.hash;
if (selected != '') {
$('#a').hide();
$(selected).show();
}
});
I have a pie chart. Functionality is that when I select a particular section of pie chart, then it redirects to the next page with selected tab. I am able to get value of that pie chart section by using this code:
var search = document.URL.split('?')[1];
Now my fight is how to enable particular tab on the next page on the basis of value of "search" variable.
Next when user comes direct to this page then 1st tab is enable by default. for this I used the code:
<div class="tab-pane in active" id="tab1">
I have tried in many ways(like $("ul.tabs li:first").addClass("active").show() or using eq()) but have no success. Please let me know if anyone can help me out.
This should do the job:
<script>
$(function() {
$("#tabs").tabs();
var search = document.URL.split('?')[1];
switch (search) {
case "error":
$("#tab1 > a").click();
break;
case "suspect":
$("#tab2 > a").click();
break;
}
});
</script>
<div id="tabs">
<ul class="nav nav-tabs" id="myTab">
<li id="tab1" class="active"> Error</li>
<li id="tab2"><a href="#suspect" data-toggle="tab" >Suspect </a></li>
</ul>
<div class="tab-pane in active" id="error">
Error
</div>
<div class="tab-pane" id="suspect">
Suspect
</div>
</div>
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");
});