Hi I'm accustomed to writing code in jQuery, and wanting to learn to write in plain Javascript instead. I've got this example to show and hide some tabs using jQuery which is working correctly, but how would this be written differently in Javascript?
I'm trying to compare how differently they're written so i can get a better understanding of it. Any help/tips on how this would be done would be greatly appreciated.
setTimeout(function() {
$('.tabContainer a').click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var activeTab = $(this).attr("href");
$('.tabContent').not(activeTab).css("display","none");
$(activeTab).fadeIn();
});
},1000);
.tabContent {display: none;}
#tab1 {display: block;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>
You can try the following way except the fadeIn:
setTimeout(function() {
//get all a elements and loop through them
document.querySelectorAll('.tabContainer a').forEach(function(el){
//attach click event to the current element
el.addEventListener('click', function(event) {
event.preventDefault();
//remove the class current from all
this.closest('.tabContainer')
.querySelector('.current')
.classList.remove("current");
//add the class current to the current element's closest li
this.closest('li').classList.add("current");
//set display style none to all
document.querySelectorAll('.tabContent').forEach(function(a){
a.style.display = "none";
});
var activeTab = this.getAttribute("href");
//set display style block to the mached element
document.querySelector(activeTab).style.display = "block";
});
});
}, 1000);
.tabContent {display: none;}
#tab1 {display: block;}
<div class="tabWrapper">
<ul class="tabContainer">
<li class="current">Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div id="tab1" class="tabContent">Tab 1</div>
<div id="tab2" class="tabContent">Tab 2</div>
<div id="tab3" class="tabContent">Tab 3</div>
</div>
Related
classList to remove class using Javascript is not working, or is it because of any other error in code
Code: http://codepen.io/DPK_RAO/pen/VPXxoJ/
<ul class="nav">
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="video1 active" id="video1">Link 1</div>
<div class="video2" id="video2">Link 2</div>
CSS:
.video1, .video2{
display:none;
}
.active{
display:block;
}
JS
document.getElementById("link1").addEventListner("click", activeVideo1);
function activeVideo1(){
document.getElementById("video2").classList.remove("active");
var v1 = document.getElementById("video1");
v1.className += "active";
}
document.getElementById("link2").addEventListner("click", activeVideo2);
function activeVideo2(){
document.getElementById("video1").classList.remove("active");
var v2 = document.getElementById("video2");
v2.className += "active";
}
When I run the script I get the following error in the console:
Uncaught TypeError: document.getElementById(...).addEventListner is
not a function
So your script isn't even getting to the removeClass function and it stops in the event's listener part.
You write the function with a typo.
it's
addEventListener
Another note:
Replace this:
v1.className += "active";
with:
v1.className += " active"; //added a blank
Updated codepen
why don't you just add the class as in
var v2 = document.getElementById("video2");
v2.classList.add('active');
?
You've a typo in addEventListner should be addEventListener note the e:
addEventListener
____________^
Since you're using jQuery it could be just simple like the following example :
$("#link1").on("click", function(){
$("#video2").removeClass("active");
$("#video1").addClass("active");
});
$("#link2").on("click", function(){
$("#video1").removeClass("active");
$("#video2").addClass("active");
});
.video1, .video2{
display:none;
}
.active{
display:block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="video1 active" id="video1">Link 1</div>
<div class="video2" id="video2">Link 2</div>
Solution using pure JS :
document.getElementById("link1").addEventListener("click", function(){
document.getElementById("video2").classList.remove("active");
document.getElementById("video1").classList.add("active");
});
document.getElementById("link2").addEventListener("click", function(){
document.getElementById("video1").classList.remove("active");
document.getElementById("video2").classList.add("active");
});
.video1, .video2{
display:none;
}
.active{
display:block;
}
<ul class="nav">
<li>Video 1</li>
<li>Video 2</li>
</ul>
<div class="video1 active" id="video1">Link 1</div>
<div class="video2" id="video2">Link 2</div>
When I click on the tab it then displays the content that is associate. I'm using # to do it. Here is what I have tried, but I don't know how to do the switching part, Can someone help please?
So when click tab1 to show tab1 content, and click tab2 to show tab2 content and so on.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$(this).addClass('active').siblings().removeClass('active');
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
Edit, I prefer not to use jQuery UI or any plugins.
You're very close here, just a couple things:
1) I would suggest applying the "active" class to the parent <li> so your highlighting will be simpler to get at
2) Use the href of the clicked link to switch out the content, and I would use a class to hide/show content, however I will provide jQuery following your example of using the show() and hide() method. Either approach would work.
The final jQuery would be something like this:
$(document).ready(function() {
$('.tab-content').slice(1).hide();
$('.tab-menu li').eq(0).addClass('active');
$('.tab-menu li a').click(function(e) {
e.preventDefault();
var content = $(this).attr('href');
$(this).parent().addClass('active');
$(this).parent().siblings().removeClass('active');
$(content).show();
$(content).siblings('.tab-content').hide();
});
});
It's working in a fiddle for reference: http://jsfiddle.net/yscbeaxh/
It's really hard to get tabs right. Your current code isn't too bad, but you will face hiccups eventually. I can't say what OTTOMH, but, you will ;).
For your current code, you need to take the href attribute from the click li, select the matching p (based on ID - it's handy that the href attr returns #tab-1, you can use that as your selector!), and show it. You'll also want to hide the other 'active' tabs, and remove the class from any 'active' li's too.
This code should do the trick.
$(document).ready(function () {
$('.tab-content:not(:first)').hide();
$('.tab-menu li a').click(function () {
$('.tab-menu li a.active').removeClass('active');
var tabDivId = $(this).attr('href');
$(this).addClass('active').siblings().removeClass('active');
$('p.tab-content').hide();
$(tabDivId).show();
});
});
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<p id="tab-1" class="tab-content">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
The solution is very simple.
First I gave all the tabs a display of none and the active class display:block;
Than with jquery I take the href value of the <a> you clicked and than use that as the selector to add class active to the right tab.
demo
html:
<ul class="tab-menu">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="tabs">
<p id="tab-1" class="tab-content active">Content 1</p>
<p id="tab-2" class="tab-content">Content 2</p>
<p id="tab-3" class="tab-content">Content 3</p>
</div>
css:
.tab-menu {
padding: 0;
}
.tab-menu li {
display: inline-block;
}
.tab-menu .active {
background: yellow;
}
.tabs{
width:50%;
}
.tabs > p{
display:none;
}
.tabs .active{
display:block;
}
Jquery:
$(document).ready(function () {
$('.tab-menu li a').click(function () {
$('.tab-menu li a').removeClass('active');
$(this).addClass('active');
tab = $(this).attr('href');
$('.tabs .active').removeClass('active');
$(tab).addClass('active');
});
});
I want to add Next/Previous buttons for JS tabs, so users can go to a next tab using these buttons. Also, I want previous button appear only when the second tab opened and next button disappear when the last tab is opened. How can I do that?
$(document).ready(function() {
$(".tabs-menu a").click(function(event) {
event.preventDefault();
$(this).parent().addClass("current");
$(this).parent().siblings().removeClass("current");
var tab = $(this).attr("href");
$(".tab-content").not(tab).css("display", "none");
$(tab).fadeIn();
});
});
#tab-1 {
display: block;
}
.tab-content {
display: none;
overflow: hidden;
}
<ul class="tabs-menu" class="articles">
<li class="current">tab 1
</li>
<li>tab 2
</li>
<li>tab 3
</li>
<li>tab 4
</li>
</ul>
<div class="tab">
<div id="tab-1" class="tab-content">Content 1</div>
<div id="tab-2" class="tab-content">Content 2</div>
<div id="tab-3" class="tab-content">Content 3</div>
<div id="tab-4" class="tab-content">Content 4</div>
</div>
we have tried the next previous button for your code
check this jsfiddle link
$('#nex').on('click',function(){
if(count<4)
{
$('.tab-content').hide()
count++;
$('#tab-'+count).show();
if(count>1)
$('#pre').show();
else
$('#pre').hide();
}
});
$('#pre').on('click',function(){
if(count>1)
{
$('.tab-content').hide()
count--;
$('#tab-'+count).show();
if(count<4)
$('#nex').show();
else
$('#nex').hide();
}
});
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