I have the following List:
<ul>
<li>Main</li>
<li>Title 1</li>
<li>Title 2</li>
<li>Title 3</li>
<li>Title 4</li>
</ul>
And the following div structure:
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>
At the beginning all div's are visible. (Because of Google and for User without JS)
If the page is loaded, all except the main div should be hidden. If I'm clicking on the navigation point with the data attribute "title_1" the related div should be visible and the main div should be hidden also. Also the class active should jump to the new active navigation point. :)
Is that possible? I don't know how to get the solution for this problem.
Thanks for your help!
You can use on click event on a elements inside ul li and get the attribute data-related. Then you can use this and find div with id same as data-related and toggle(hide/show or anything else):
$("ul li a").on("click", function() {
$("div[id=" + $(this).attr("data-related") + "]").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Main
</li>
<li>Title 1
</li>
<li>Title 2
</li>
<li>Title 3
</li>
<li>Title 4
</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>
Another example with addClass/removeClass:
$("ul li a").on("click", function() {
$("div").removeClass("activeLnk");
$("div[id=" + $(this).attr("data-related") + "]").addClass("activeLnk");
});
.activeLnk {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>Main
</li>
<li>Title 1
</li>
<li>Title 2
</li>
<li>Title 3
</li>
<li>Title 4
</li>
</ul>
<div id="main">... Content ...</div>
<div id="title_1">... Content ...</div>
<div id="title_2">... Content ...</div>
<div id="title_3">... Content ...</div>
<div id="title_4">... Content ...</div>
you could match the ID with the data-attr like this:
$("div").each(function(){
$(this).hide();
if($(this).attr('id') == 'main') {
$(this).show();
}
});
$('a').on( "click", function(e) {
e.preventDefault();
var id = $(this).attr('data-related');
$("div").each(function(){
$(this).hide();
if($(this).attr('id') == id) {
$(this).show();
}
});
});
http://jsfiddle.net/mcko06ht/
Add a class to this html code :
<div id="main" class="tab">... Content ...</div>
<div id="title_1" class="tab">... Content ...</div>
<div id="title_2" class="tab">... Content ...</div>
<div id="title_3" class="tab">... Content ...</div>
<div id="title_4" class="tab">... Content ...</div>
Put this in a script tag :
$('ul a').click(function(e){
$('ul li').removeClass('actif');
$(this).find('li').addClass('actif');
$('.tab').hide();
$('#'+$(this).attr('data-related')).show();
//This is also valid
//$('#'+$(this).data('related')).show();
e.preventDefault();
});
Related
I did the following code, to be able to change the class of an li tag and then change the CSS of it.
I created a cookie variable that help me to select the good li tag. but I have a gap when I click.
I have three tabs : device, links and sites.
for example if I click on devices and had click on sites before, sites will be selected.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.tabs .tab-links a').on('click', function(e) {
jQuery.cookie("select", jQuery(this).parent('li').attr('id'));
});
jQuery('#' + jQuery.cookie("select")).addClass('active').siblings().removeClass('active');
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
Since clicking the link takes you to a new page, there is no need to do this programmatically.
The page /netmg/controller/device/search should have
<li id="device" class="active">...</li>
<li id="link">...</li>
<li id="site">...</li>
The page /netmg/controller/link/search should have
<li id="device">...</li>
<li id="link" class="active">...</li>
<li id="site">...</li>
The page /netmg/controller/site/search should have
<li id="device">...</li>
<li id="link">...</li>
<li id="site" class="active">...</li>
You can put that in the HTML.
If, instead, you want to make it all one page and the href attribute indicates what content is displayed, say, in a <div id="deviceContent"></div> or similar, you could use this:
<script>
jQuery(document).ready(function() {
jQuery('.tab-links li a').click(function(e){
e.preventDefault();
var newdiv = jQuery(this).attr('href');
jQuery('.tab-links li').removeClass('active');
jQuery(this).parent('li').addClass('active');
jQuery('.contents div').hide();
jQuery(newdiv).show()
});
});
</script>
<div class="tabs" >
<ul class="tab-links">
<li id="device" class="active">Devices</li>
<li id="link">Links</li>
<li id="site">Sites</li>
</ul>
</div>
<div class="contents">
<div id="deviceContent"><!-- insert some contents -->a</div>
<div id="linkContent"><!-- insert some contents --> b</div>
<div id="siteContent"><!-- insert some contents -->c</div>
</div>
For a demo, see this fiddle.
I am trying to have some tabs to behave as shown here. The following codes do the job, but upon click the Tab2, the content of Tab1 still shows on the right panel and if I click the items/links on Tab2, it displays below the content of Tab1. I need a proper onClick event so that previous Tab's content gets cleared once another Tab is clicked. Here are my codes:
<script type="text/javascript">
function showTab(selected, total)
{
for(i = 1; i <= total; i += 1)
{
document.getElementById('tabs-' + i).style.display = 'none';
}
document.getElementById('tabs-' + selected).style.display = 'block';
}
</script>
<div id="tabs-1" style="display: none">Tab1 info 1 content</div>
<div id="tabs-2" style="display: none">Tab1 info 2 content</div>
<div id="tabs-3" style="display: none">Tab1 info 3 content</div>
<ul class="side bar tabs">
<li id = "tabs1" onclick = "showTab(1,3)">Tab1 info 1</li>
<li id = "tabs2" onclick = "showTab(2,3)">Tab1 info 2</li>
<li id = "tabs3" onclick = "showTab(3,3)">Tab1 info 3</li>
</ul>
Thanks for all help.
you can do this very easily with jQuery using .siblings() to hide the other content sections not active:
JS
$("ul.side.bar.tabs li").click(function(){
var grabName = $(this).attr("class");
$("#tab-"+grabName).show().siblings("div").hide();
});
HTML
<div id="tab-one" style="display: none">Tab1 info 1 content</div>
<div id="tab-two" style="display: none">Tab1 info 2 content</div>
<div id="tab-three" style="display: none">Tab1 info 3 content</div>
<ul class="side bar tabs">
<li class="one">Tab1 info 1</li>
<li class="two">Tab1 info 2</li>
<li class="three">Tab1 info 3</li>
</ul>
FIDDLE
Be sure to wrap your code in a ready function in the <head></head> section:
<head>
//link to jquery
<script>
$(document).ready(function(){
$("ul.side.bar.tabs li").click(function(){
var grabName = $(this).attr("class");
$("#tab-"+grabName).show().siblings("div").hide();
});
});
</script>
</head>
I am using the code in example http://www.faridesign.net/2012/05/create-a-awesome-vertical-tabbed-content-area-using-css3-jquery/ I am trying to slide the div tags on a button click on the list so the current tab-content will slide in and the tab just clicked will slide out. I currently have the working example where I can switch between divs fine, but I need to slide in and out between divs. Is there any script I can do this with the current code. using .slide or .effect instead of .show() looks to display two divs at the same time. I'm not sure what I am doing wrong.
<div id="v-nav">
<ul>
<li tab="tab1" class="first current">Main Screen</li>
<li tab="tab2">Div 1</li>
<li tab="tab3">Div 2</li>
<li tab="tab4">Div 3</li>
<li tab="tab5">Div 4</li>
<li tab="tab6">Div 5</li>
<li tab="tab7">Div 6</li>
<li tab="tab8" class="last">Div 7</li>
</ul>
<div class="tab-content">
<h4>Main Screen</h4>
</div>
<div class="tab-content">
<h4>Div 1</h4>
</div>
<div class="tab-content">
<h4>Div 2</h4>
</div>
<div class="tab-content">
<h4>Div 3</h4>
</div>
<div class="tab-content">
<h4>Div 4</h4>
</div>
<div class="tab-content">
<h4>Div 5</h4>
</div>
<div class="tab-content">
<h4>Div 6</h4>
</div>
<div class="tab-content">
<h4>Div 7</h4>
</div>
My Script looks like
$(function () {
var items = $('#v-nav>ul>li').each(function () {
$(this).click(function () {
//remove previous class and add it to clicked tab
items.removeClass('current');
$(this).addClass('current');
//hide all content divs and show current one
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
//$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
$('#v-nav>div.tab-content').hide().eq(items.index($(this))).slideToggle();
window.location.hash = $(this).attr('tab');
});
});
if (location.hash) {
showTab(location.hash);
}
else {
showTab("tab1");
}
function showTab(tab) {
$("#v-nav ul li:[tab*=" + tab + "]").click();
}
// Bind the event hashchange, using jquery-hashchange-plugin
$(window).hashchange(function () {
showTab(location.hash.replace("#", ""));
})
// Trigger the event hashchange on page load, using jquery-hashchange-plugin
$(window).hashchange();
});
Try Vertical jQuery UI Tabs. You might have to restyle a little bit, but I think the effect is what you want. You should be able to add the slide effect from http://api.jqueryui.com/slide-effect/ to the change tab event.
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
I could really use some help with what I have a feeling will be some pretty basic jquery, but I'm stuck all the same.
I have an unknown (dynamically generated) number of divs in my html each with a class of "page".
What I want to do is add an id to each div.page, and then fill a ul with an id of menu with li for each div.page containing an anchor with a href value of #page_n
(ie the id value of its corresponding div)
I want my output to look like this:
<div class="page" id="page_1">
...content...
</div>
<div class="page" id="page_2">
...content...
</div>
.....
<div class="page" id="page_n">
...content...
</div>
<ul #menu>
<li>Page 1</li>
<li>Page 2</li>
.....
<li>Page n</li>
</ul>
I'm adding the id's okay with:
$('li.page').each(function(index){$(this).attr("id", "page_" + (index+1));
});
But I'm struggling with the second part of my problem. I know this is probably kinda basic, but I'm just starting out....
Any help gratefully received... thanks in advance...
If your HTML initially looks like this:
<div class='page'>...</div>
<div class='page'>...</div>
<div class='page'>...</div>
<ul id='menu'></ul>
This jQuery code:
$(document).ready(function() {
$('div.page').each(function(i) {
var x = i+1;
var id = 'page_' + x;
$(this).attr('id', id);
var li = $('<li/>').append(
$('<a/>').attr('href', '#' + id).html('Page ' + x)
);
$('#menu').append(li);
});
});
Will make your HTML look like this:
<div class='page' id='page_1'>...</div>
<div class='page' id='page_2'>...</div>
<div class='page' id='page_3'>...</div>
<ul id='menu'>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>