Here my JSfiddle : http://jsfiddle.net/sgmkghf4/
I want to create multiple level tabs.
In the first tabs i want to add somme other tabs levels but the first level tabs close when i click on second levels tabs.
Where is the mistake ?
<!--TABS WRAPPER-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1</li>
<li><a class="icon" href="#finished" rel="finished">2</a></li>
<li>3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="pending" class="tab_content" style="display: block;">
<!--SECOND TABS-->
<div class="tabs_wrapper">
<!-- 2nd new tab design START -->
<div id="new2_tabs">
<ul>
<li class="active">1.1</li>
<li><a class="icon" href="#othertwo" rel="othertwo">1.2</a></li>
<li>1.3</li>
</ul>
</div>
<div id="new2_tabs_content" style="padding:0">
<div id="otherone" class="tab_content" style="display: block;">
<p>TEST1</p>
</div>
<div id="othertwo" class="tab_content">
<p>TEST2</p>
</div>
<div id="otherthree" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
<!--SECOND TABS-->
</div>
<div id="finished" class="tab_content">
<p>TEST2</p>
</div>
<div id="cancelled" class="tab_content">
<p>TEST3</p>
</div>
</div>
<!-- 2nd new tab design END -->
</div>
$(document).ready(function(){
// Main function that shows and hides the requested tabs and their content
var set_tab = function(tab_container_id, tab_id){
// Remove class "active" from currently active tab
$('#' + tab_container_id + ' ul li').removeClass('active');
// Now add class "active" to the selected/clicked tab
$('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");
// Hide contents for all the tabs.
// The '_content' part is merged with tab_container_id and the result
// is the content container ID.
// For example for the original tabs: tab_container_id + '_content' = original_tabs_content
$('#' + tab_container_id + '_content .tab_content').hide();
// Show the selected tab content
$('#' + tab_container_id + '_content #' + tab_id).fadeIn();
}
// Function that gets the hash from URL
var get_hash = function(){
if (window.location.hash) {
// Get the hash from URL
var url = window.location.hash;
// Remove the #
var current_hash = url.substring(1);
// Split the IDs with comma
var current_hashes = current_hash.split(",");
// Loop over the array and activate the tabs if more then one in URL hash
$.each(current_hashes, function(i, v){
set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
});
}
}
// Called when page is first loaded or refreshed
get_hash();
// Looks for changes in the URL hash
$(window).bind('hashchange', function() {
get_hash();
});
// Called when we click on the tab itself
$('.tabs_wrapper ul li').click(function() {
var tab_id = $(this).children('a').attr('rel');
// Update the hash in the url
window.location.hash = tab_id;
// Do nothing when tab is clicked
return false;
});
});
Can you help me ?
You have very messed markup, but the main reason why this doesn't work is that you're using same id for multiple elements (new2_tabs and new2_tabs_content).
First of all, change ids to unique values. Then add classes to elements which you want to style, like this:
...
<div id="new_tabs" class="tabs">
...
<div id="new_tabs_content" style="padding:0" class="tabs_content">
In your css rewrite rules to use classes instead of ids. Here is working demo
Related
<li class='active'>
<a data-toggle='tab' href='#table' class="tab_list" >
<div>
<span style="font-size: 16px;">Tweets</span>
</div>
</a>
</li>
<li>
<a data-toggle='tab' href='#summary' class="tab_list">
<div>
<span style="font-size: 16px;">Metrics</span>
</div>
</a>
</li>
<div class="tab-content " style=" background-color:;padding-left: ;">
<!--METRICS TAB-->
<div id='summary' class='tab-pane fade'>
<h1>abc</h1>
</div>
<!--METRICS TAB END-->
<!--Tweets table TAB-->
<div id='table' class='tab-pane fade in active'>
<h1>abc</h1>
</div>
I Have multiple tab in my side navigation bar ,i want to open my selected tab in new browser tab, but when i right click on selected tab and open it on new tab ,it always open the default active tab.
I want to open the selected tab
You can do it with javascript / jquery. Check whether the url contains hash and if there is an id with the same name, show it by triggering click event.
<script>
$(document).ready(function () {
var url = $(location).attr('href');
if(url.indexOf("#")) {
var tabId = window.location.hash;
console.log(tabId);
console.log($('a[href="'+tabId+'"]').parent('li'));
if($('a[href="'+tabId+'"]').parent('li').length){
$('a[href="' + window.location.hash + '"]').trigger('click');
}
}
});
</script>
From a web analyst perspective on any given website i am looking find out which same page anchors are clicked the most by console logging the anchor's text value (inner html text) in the console for now.
The approach i took was to take the current page url after every anchor click and check to see if their had been any hash changes at the end of the url string and if so print that anchor's text value in the console.
var anchor = $("a[href^=\\#]");
anchor.on("click", function(){
if("onhashchange" in window) {
var anchorText = this.text;
console.log(anchorText);
}
});
I'm having issues with the code I wrote because its returning the inner Html text for any anchors on the page(except the ones with external links) but I only want to track the ones that lead to a section on the same page.
Would the approach i took need to be revised to even begin with ?
Here is some of the html I am working with and different anchors I want to track and ones I don't.
<!-- Where the click on the anchor i want to target happens -->
<nav>
<h2 class="wb-inv">Promotions</h2>
<ul class="toc lst-spcd col-md-12">
<li class="col-md-4">
Anchor for section 1
</li>
</nav>
<!-- below is the section of the same page the anchors would point to -->
<div class="col-md-12 pull-left">
<h2 id="story1">Section 1 Title </h2>
<p>Random paragraph 1</p>
</div>
<!-- The html I'm working with contains a set of tabs that reveal information as you click them, the href attribute and the id are both in the anchor. This is an example of anchors I wouldn't want to track-->
<a tabindex="-1" id="details-panel1-lnk" role="tab" aria-selected="false" aria-controls="details-panel1" href="#details-panel1">
<h2 class="h5 mrgn-tp-sm mrgn-bttm-sm">Online</h2>
</a>
Anchors that navigates to element on page is logged.
$(document).ready(function() {
var anchor = $("a[href^=\\#]");
var url = $(window);
anchor.on("click", function(e){
if ( $('#' + $(this).text()).length ) {
console.log($(this).text());
}
});
})
.section {
height: 400px;
}
.section:nth-child(even) {
background: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="section" id="one">
one
</div>
<div class="section" id="two">
two
</div>
<div class="section" id="three">
three
</div>
<div class="section" id="four">
four
</div>
var anchor = $("a[href^=\\#]").not("a[href=#shr-pg0]");
anchor.on("click", function(){
var anchorText = this.text;
$(window).one("hashchange",function() {
console.log(anchorText);
});
});
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.
I have 2 questions:
1) Since I have similar structure for the html contents and the only difference is that class title contents are different. I tried using $(div .title:contains("cat")) also
$(div .title).text()="cat")
2)How can I get the index of the accordion by just checking the $(div a) contents are required ones. I tried using $(div a).text()=="cat"
Check the codes here:
HTML1 contents
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">cat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">rat</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
<div class="mod moduleselected" id="mod969">
<div class="content module moduleselect">
<div class="hd" ><div class="inner">
<div class="title">dog</div>
<ul class="terminallist"></ul>
<ul class="buttons">
<li class="help"></li>
<li class="show" ></li>
</ul>
</div>
</div>
</div>
Accordian
<div id="dia">
<div id="dialog" title="Detailed FeedBack ">
<div id="accordion">
<h3>dog</h3>
<h3>cat</h3>
<h3>rat</h3>
</div>
</div>
</div>
Javascript
$('div .title').mouseover(function() {
if($("div a").text().indexOf("cat")!=-1)
{
$("#accordion").accordion("activate", 1);
}
$('div .title').mouseleave(function(){$("#accordion").accordion("activate", -1); });
});
Here is what I am trying to do with this javascript code. When I mouse over the cat contents I want the accordion with cat contents to open. And when I leave it to close the accordion selection.
When I hover my mouse over the html contents cat ,rat. It should side by side open the accordion button of those contents. Example: I hovered over rat (of html contents) I should see accordion rat open (or active i.e. contents visible).
Updated (see demo)
It sounds like you want something like this: when a content section is hovered over, find the title of that section, match its text against the text of the <a> elements in the accordion, and activate that section:
$(function() {
$("#accordion").accordion();
var links = $('#accordion a').map(function() {
return $(this).text().trim().toLowerCase();
}).toArray();
$('div.content').mouseover(function() {
var title = $(this).find('div.title').text().toLowerCase();
var index = links.indexOf(title);
if (index != -1) {
$("#accordion").accordion("activate", index);
}
});
});
P.S. jQuery does have a .hover() method for this as well.
It should be as succinct as the following (with potential minor tweaks):
$('.content .title').hover(function(e){
var index = this.textContent.split(/\W/)[1] - 1;
$("#accordion").accordion('activate', index);
});
Be careful with the HTML as this regular expression is overly simple in that it just grabs the last "word" which in the case of your example is a number. We subtract one to get a zero-based index. That will break if you add further text to the element.
See: http://jsfiddle.net/35yGV/