i need help about loading tab content when page is loaded. My example work good but default tab load content only when i click on him. That content is not loaded automatically when page is loaded is empty.
Check:
Fiddle example
Like on example u will see you
<ul class="nav nav-tabs tabs-up" id="friends">
<li> Contacts </li>
<li> Friends list</li>
<li>Awaiting request</li>
</ul>
<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>
And 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;
});
Place this at the very end of your script:
$(document).ready(function(){
$('[data-toggle="tabajax"]:first').click();
});
that's it worked here is the complete js code:
<script type="text/javascript">
$('[data-toggle="tab"]').click(function(e) {
var $this = $(this),
loadurl = $this.attr('href'),
targ = $this.attr('data-target');
$.get(loadurl, function(data) {
$(targ).html(data);
});
$('[data-toggle="tab"]:eq(0)').trigger('click');
$this.tab('show');
return false;
});
$(document).ready(function(){
$('[data-toggle="tab"]:first').click();
});
</script>
Thanks a lot
Related
Uncaught Error: Syntax error, unrecognized expression: [href=#technical]
tabs.js files
$(function() {
var tab = $('.tab a'),
content = $('.tab-content');
if ( location.hash ){
tab.filter('[href='+location.hash+']').addClass('active');
content.hide().filter(location.hash).show().fadeIn();
} else {
tab.filter(':first').addClass('active');
content.filter(':not(:first)').hide();
}
tab.click(function(){
if( location.hash ){
var id = location.hash;
} else {
var id = $(this).attr('href');
}
tab.removeClass('active').filter('[href='+id+']').addClass('active');
content.hide().filter(id).show();
});
$(window).bind('hashchange', function(){
tab.trigger('click');
});
});
tabs.php files
<div class="tab">
Overview
Features
Articles
Technical
</div>
<div id="overview" class="tab-content">
<p>echo..</p>
</div>
<div id="features" class="tab-content">
<p>echo..</p>
</div>
<div id="articles" class="tab-content">
<p>echo..</p>
</div>
<div id="technical" class="tab-content">
<p>echo..</p>
</div>
Why am I having such a problem? It works when I activate the old version, but when I try to update I have a problem. thank you
There appears to be a Quote issue. You have:
tab.removeClass('active').filter('[href='+id+']').addClass('active');
So the Selector become:
[href=#overview]
I believe you want to correct the selector to the following:
[href='#overview']
Consider the following.
$(function() {
var tab = $('.tab a'),
content = $('.tab-content');
if (location.hash) {
tab.filter("[href='" + location.hash + "']").addClass('active');
content.hide().filter(location.hash).show().fadeIn();
} else {
tab.filter(':first').addClass('active');
content.filter(':not(:first)').hide();
}
tab.click(function() {
if (location.hash) {
var id = location.hash;
} else {
var id = $(this).attr('href');
}
tab.removeClass('active').filter("[href='" + id + "']").addClass('active');
content.hide().filter(id).show();
});
$(window).on('hashchange', function() {
tab.trigger('click');
});
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="tab">
Overview
Features
Articles
Technical
</div>
<div id="overview" class="tab-content">
<p>echo..</p>
</div>
<div id="features" class="tab-content">
<p>echo..</p>
</div>
<div id="articles" class="tab-content">
<p>echo..</p>
</div>
<div id="technical" class="tab-content">
<p>echo..</p>
</div>
this does not generate the error you reported.
Jquery 3.0 deprecated bind function
// your code
$(window).bind('hashchange', function(){
tab.trigger('click');
});
// change to
$(window).on('hashchange', function(){
tab.trigger('click');
});
I have the following tabs:
<div class="container">
<div id="tabs">
<ul class="nav nav-tabs" id="prodTabs">
<li class="active">Search</li>
<li>Other search</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="search">
</div>
<div class="tab-pane" id="other">
</div>
</div>
with the following javascript:
<script>
$('#tabs').on('click','.tablink,#prodTabs a',function (e) {
e.preventDefault();
var url = $(this).attr("data-url");
if (typeof url !== "undefined") {
var pane = $(this), href = this.hash;
// ajax load from data-url
$(href).load(url,function(result){
pane.tab('show');
});
} else {
$(this).tab('show');
}
});
</script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
initialize();
});
</script>
The tab named other contains a search form and a map, once the form is submitted I get redirected to a new page. From this new page I would like to be able to go back to the other tab, but I would like to view the same exact content it had when the form was submitted.
Any ideas how I can implement this?
The browser back button does this. You can also add a button to go back:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>
Javascript:
angular.element(document).ready(function() {
var Accordion = function(el, multiple) {
this.el = el || {};
this.multiple = multiple || false;
// Variables privadas
var links = this.el.find('.link');
// Evento
links.on('click', {el: this.el, multiple: this.multiple}, this.dropdown)
}
Accordion.prototype.dropdown = function(e) {
var $el = e.data.el;
$this = $(this),
$next = $this.next();
$next.slideToggle();
$this.parent().toggleClass('open');
if (!e.data.multiple) {
$el.find('.submenu').not($next).slideUp().parent().removeClass('open');
};
}
var accordion = new Accordion($('#accordion'), false);
$scope.$apply();
});
HTML:
<div class="box1">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Products</h3>
</div>
<div class="panel-body">
<ul id="accordion" class="accordion" >
<li ng-repeat="(key, categoryType) in categories">
<div class="link">{{categoryType.name}}<i class="fa fa-chevron-down"></i></div>
<ul class="submenu">
<li ng-repeat="item in categoryType[categoryType.name] track by $index" ng-click="getProductDetails(item)">{{item.Name}}</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
Accordion sometimes expand sometimes wont, when I inspect the element nothing triggers no action at all, I am doing this on visualforce page.
Posting part of snippet from the entire code.
Thanks
I am currently using Zurb Foundation Tabs for small project. The tabs work great but I am running into a wall when trying to url target to an specific tab. I searched and found a method for getting this achived but when modifying and applying it to my example it is not working. I am getting error: “unrecognized expression: :nth-child”. How can I properly url link to a specific tab in Foundation 5? DEMO
JS/JQuery for url target
<script>
window.navigateTab = function (event) {
var url = $(event.target).attr('href');
var target = url.split('#')[1];
if (target.substr(0, 5) == 'panel') {
var state = {
tab: target.substr(5)
};
selectTab("tabs_edit", state.tab); //<-- change the tab
history.pushState(state, null, url); //<-- change the url
event.preventDefault();
}
}
window.onpopstate = function (event) {
if (event.state != null) {
selectTab("tabs_edit", event.state.tab); //<-- change the tab
}
};
function selectTab(id, tab) {
// activate only the right tab:
var tab = $("#" + id + "> dl > dd:nth-child(" + tab + ")");
console.log(tab);
var a = $("a", tab);
target = $('#' + a.attr("href").split('#')[1]);
siblings = tab.siblings();
settings = tab.closest('[data-tab]').data('tab-init');
tab.addClass(settings.active_class);
siblings.removeClass(settings.active_class);
target.siblings().removeClass(settings.active_class).end().addClass(settings.active_class);
}
$('#menu a').on("click", navigateTab);
$(document).foundation();
</script>
HTML
//Target an specific tab:
<ul id="menu" class="dropdown">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
//Actual Tabs
<dl id="tabs_edit" class="tabs vertical" data-tab>
<dd class="active">Tab 1</dd>
<dd>Tab 2</dd>
<dd>Tab 3</dd>
<dd>Tab 4</dd>
</dl>
<div class="tabs-content vertical">
<div class="content active" id="panel1a">
<p>Panel 1 content goes here.</p>
</div>
<div class="content" id="panel2a">
<p>Panel 2 content goes here.</p>
</div>
<div class="content" id="panel3a">
<p>Panel 3 content goes here.</p>
</div>
<div class="content" id="panel4a">
<p>Panel 4 content goes here.</p>
</div>
</div>
I know this post is old but after reading more into the foundation 5 text they've added Deeplinking features that works on different pages
Just add this :
data-options="deep_linking:true"
Example:
<dl class="tabs vertical" data-tab data-options="deep_linking:true">
This even works on different pages linking to it!
For link on other pages I just called the panelid
Example:
<a href="product-line.php#panel12">
Deep linking is something that Foundation 5 has not included as found in Foundation 4. I have made a fix that is not as clever but gets the job done:
if(window.location.hash){
$('dl.tabs dd a').each(function(){
var hash = '#' + $(this).attr('href').split('#')[1];
if(hash == window.location.hash){
$(this).click();
}
});
}
I wonder if we can select a particular tab in a JQuery tab system from another page..?
For example I have a 3 menu section that is Home, Services, Contact.
In services page I have a tab system with 3 tabs for now (Name1, Name2, Name3).
For example I am in home page, and in submenu under Services I have links to Tabs (Name1, Name2, Name3 ).
If I click in name2 in submenu I need to display the Name2 tab (default visible one is Name1) in services page.
I have tried to give the it link like this... services.php#tab2 (like anchor tag method)
unfortunately it doesn't work..
I’m using the following JQuery for my tab system...
var $j = jQuery.noConflict();
$j(window).load(function(){
initTabs();
});
function initTabs(){
var strHash = document.location.hash;
if (strHash == "") {
if($j('.tabs').length){
var $tabsNav = $j('.tabs-nav');
var $tabsNavLis = $tabsNav.children('li');
$tabsNav.each(function() {
var $this = $j(this);
$this.next().children('.tab-content').stop(true,true).hide().first().show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
} else
$("a[href='" + strHash + "']").parent().click();
$tabsNavLis.on('click', function(e) {
var $this = $j(this);
$this.siblings().removeClass('active').end().addClass('active');
$this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
}}
tab navigation is like below:
<ul class="tabs-nav">
<li>name1</li>
<li>name2</li>
<li>name3</li>
</ul>
<div class="tabs-container">
<div id="tab-1" class="tab-content" style="display: none;">TABLE 1</div>
<div id="tab-2" class="tab-content" style="display: none;">TABLE 2</div>
<div id="tab-3" class="tab-content" style="display: none;">TABLE 3</div>
</div>
At home page I have menu options like one bellow, so if someone clicks on menu2 at home page it should redirect him to service page but open the tab2.
<nav class="menu-container">
<ul class="menu" id="">
<li id="menu-item" class=""><a class="" href="services.php#tab2" style="line-height: 82px;"><span>Name2</span></a></li>
<li id="menu-item" class=""><a class="" href="services.php#tab3" style="line-height: 82px;"><span>Name3</span></a></li>
</ul>
</nav>
I hope that someone can answer the above question.
Thanks a lot
Mark
I've managed to find the solution by checking the hash when the page loads, and then trigger a click.
Here is the whole code, hope it will help someone.
var $j = jQuery.noConflict();
$j(window).load(function(){
initTabs();
});
function initTabs(){
if($j('.tabs').length){
var $tabsNav = $j('.tabs-nav');
var $tabsNavLis = $tabsNav.children('li');
$tabsNav.each(function() {
var $this = $j(this);
$this.next().children('.tab-content').stop(true,true).hide().first().show();
$this.children('li').first().addClass('active').stop(true,true).show();
});
$tabsNavLis.on('click', function(e) {
var $this = $j(this);
$this.siblings().removeClass('active').end().addClass('active');
$this.parent().next().children('.tab-content').stop(true,true).hide().siblings( $this.find('a').attr('href') ).fadeIn();
e.preventDefault();
});
var hash = $j.trim( window.location.hash );
if (hash) $j('.tabs-nav a[href$="'+hash+'"]').trigger('click');
}
}
One solution could be to use cookies, store the name of the tab you want to access and use the cookie value to programatically select the tab.