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>
Related
How do I add a class to an <li> element when it is clicked?
I have the following code:
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" onclick="showStuff(this)" class="mbutton">Cheerful</li>
<li id="tabs2" onclick="showStuff(this)" class="mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent" style="display: block;">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent" style="display: block;">
<h4>Content 2</h4>
</div>
When the user clicks on the first <li> then content 1 is shown and the same will happen for the 2nd <li> with the 2nd content.
Here is my JS:
function showStuff(element) {
var tabContents = document.getElementsByClassName('tabContent');
for (var i = 0; i < tabContents.length; i++) {
tabContents[i].style.display = 'none';
}
var tabContentIdToShow = element.id.replace(/(\d)/g, '-$1');
document.getElementById(tabContentIdToShow).style.display = 'block';
}
$('ul#moodtabs li').click(function() {
$('ul li.current').removeClass('current');
$(this).closest('li').addClass('current');
});
I'm trying to add a class active to the <li> tags so I can style them when they are active.
Your code already works (could be though better written)
But most probably you're missign to wrap your jQuery code in DOM ready:
jQuery(function( $ ){ // DOM ready
$('.tabs').each(function() {
var $tab = $(this).find(".tab");
$tab.on("click", function() {
var tabId = this.id.replace(/\D/g,'');
$tab.not(this).removeClass('current');
$(this).addClass('current');
$(".tabContent").removeClass("current");
$("#tabs-"+tabId).addClass("current");
});
});
});
.mbutton {background:none;}
.mbutton.current{background:red;}
.tabContent {display:none;}
.tabContent.current{display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<ul id="moodtabs" class="side bar tabs">
<li id="tabs1" class="tab mbutton">Cheerful</li>
<li id="tabs2" class="tab mbutton">Romantic</li>
</ul>
<div id="tabs-1" class="tabContent">
<h4>Content 1</h4>
</div>
<div id="tabs-2" class="tabContent">
<h4>Content 222222</h4>
</div>
I think the simplest binding would be
$('ul#moodtabs li').click(function() {
$(this).addClass('current').siblings('li').removeClass('current');
});
You can also drop your javascript function entirely and have this be your full function
$('ul#moodtabs li').click(function() {
var myTab = $(this).index();
$(this).addClass('current').siblings('li').removeClass('current');
$('.tabContent').eq(myTab).css('display','block').siblings('.tabContent').css('display','none');
});
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 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();
});
I found out on several articles that it is possible to navigate JqueryUI tabs using a button or tag.
I am using this simple method
$("#vtabs").tabs();
$("#tabsinner").tabs();
$(".changeTab").click(function() {
alert("asdas");
var selected = $("#tabsinner").tabs("option", "selected");
$("#tabsinner").tabs("option", "selected", selected + 1);
});
and the html :
<div id="vtabs">
<ul id="verticalUl">
<li>Outer Tab 1</li>
<li>Outer Tab 2</li>
<li>Outer Tab 3</li>
</ul>
<div id="vtab-1">
<div id="tabsinner" >
<ul id="horizontalUl">
<li>Inner Tab 1</li>
<li>Inner Tab 2</li>
<li>Inner Tab 3</li>
</ul>
<div id="tabsinner-1">
<h2>Content heading 1</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-2">
<h2>Content heading 2</h2>
<button type="button" class="nexttab">Next Tab</button>
</div>
<div id="tabsinner-3">
<h2>Content heading 3</h2>
</div>
</div>
</div>
<div id="vtab-2">
<h2>Vertical Tab Content heading 2</h2>
</div>
<div id="vtab-3">
<h2>Vertical Tab Content heading 3</h2>
</div>
Now I am using vertical tabs to the left side and than more horizontal tabs inside the outer tabs (nested tabs). Now I think that this is not the issue since I removed the outer ones and it still doesn't work.
Thanks!
There are 2 problems I can see, the class of the next button is nexttab and the option to use is active
$(".nexttab").click(function () {
var selected = $("#tabsinner").tabs("option", "active");
$("#tabsinner").tabs("option", "active", selected + 1);
});
Demo: Fiddle
I have a menu list that refer to different projects.
Each list item shares its "ID" with a project showcased in a gallery.
<div class="menu">
<ul>
<li id="id1">project 1</li>
</ul>
</div>
<div class="gallery">
<div class="proc id="id1">project 1</div>
</div>
I'd like a jQuery function that :
When a list item from the menu is clicked, gets the project with the same id to do something.
I really don't know where to start from and I'm stuck at that :
<script>
$( "li#id1").click(function() {
$( ".project#id1" ).show();
});
</script>
Many thanks
As the comments said the IDs must be unique and you have missing quote.
You can use data attributes to handle your logic or combination of ids and data attributes.
Try something like this:
HTML
<div class="menu">
<ul>
<li data-project-id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" data-project-id="first-project-id">project 1</div>
</div>
JavaScript
$('.menu li').click(function(){
var targetId = $(this).attr('data-project-id');
$('.proc[data-project-id="' + targetId + '"]').show();
});
The click event is attached to every li item in the element with class .menu.
On click event we extract the data-project-id attribute from the clicked element, find the project elemenet from gallery and show it.
JSFiddle Demo
you can use normal id also (as selector)
HTML
<div class="menu">
<ul>
<li id="first-project-id">project 1</li>
...
</ul>
</div>
<div class="gallery">
<div class="proc" id="first-project-id">project 1</div>
</div>
jQuery
$('.menu li').click(function(){
var targetId = $(this).attr('id');
$('.proc[id="' + targetId + '"]').toggle();
});