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();
}
});
Related
I need the current element with a class of "visible" to have removeEeventListener (whilst not being clickable) while other elements have addEventListener.
Basically, the current tab that is clicked on will have no event listener will the other tabs do. I am pretty close as the code below does remove the listener on a visible tab but does not add listeners to the others. Is this possible to do? Please no jQuery, thanks.
JS
const tabs = document.querySelectorAll('[data-tab-target]')
const tabContents = document.querySelectorAll('[data-tab-content]')
tabs.forEach(tab => {
if (!tab.classList.contains('visible')) {
tab.addEventListener('click', function handler() {
let target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContent => {
tabContent.classList.remove('visible');
});
tabs.forEach(tab => {
tab.classList.remove('visible');
});
tab.classList.add('visible');
target.classList.add('visible');
if (tab.classList.contains('visible')) {
tab.removeEventListener('click', handler, true);
} else {
tab.addEventListener('click', handler, true);
}
}, true);
}
});
HTML
<ul class="tab-nav">
<li class="tabnav visible" data-tab-target="#tab1">
tab1
</li>
<li class="tabnav" data-tab-target="#tab2">
tab2
</li>
<li class="tabnav" data-tab-target="#tab3">
tab3
</li>
</ul>
<div class="tab-content">
<div id="tab1" class="tab visible" data-tab-content>
<p>Tab 1</p>
</div>
<div id="tab2" class="tab" data-tab-content>
<p>Tab 2</p>
</div>
<div id="tab3" class="tab" data-tab-content>
<p>Tab 3</p>
</div>
</div>
CSS:
.tab {
display: none;
}
.visible.tab {
display: block!important;
}
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>
I've been trying to get my divs to display per click - which works..... However, I want Div1 to be shown - but Div2 and Div3 hidden until clicked and when clicked, the current visible div should be hidden.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
I've managed to get the following:
Show all on load and show none until a click is registered. But onlick seems to not work when I add in the classes:
Show (display:block;)
hide (display:none;)
What could be causing this?
I would like for tab1 to show on page load, but tab 2 and tab 3 only show when clicked..... But that also hides the current active div.
Is there another method to onclick?
Just specify the first tab in your css. JQuery will add it's own CSS which will have a higher specificity on click.
$(function(){
$("#tabs li a").click(function(){
$(".platform").hide();
var myDiv = $(this).attr("href");
$(myDiv).show();
});
});
.platform {
display: none;
}
.platform.tab1 { /* <-- I added this */
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Instead of using .hide() and .show() you could use a show class. Include this in the class of the first tab, then change it in the click handler.
$(function() {
$("#tabs li a").click(function() {
$(".platform.show").removeClass("show");
var myDiv = $(this).attr("href");
$(myDiv).addClass("show");
});
});
.platform {
display: none;
}
.platform.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="tabs">
<li>PC</li>
<li>PS4</li>
<li>XBOX</li>
</ul>
<div class="platform tab1 show" id="tab1">
<div>
platform 1
</div>
</div>
<div class="platform tab2" id="tab2">
<div>
platform 2
</div>
</div>
<div class="platform tab3" id="tab3">
<div>
platform 3
</div>
</div>
Here is some code and a question: how to enable toggle effect after clicking again on menu link button with saving existing functionality? So I need to hide content on second click (secondary click on link one hides content 1, etc.) All other staff is working perfect, but I have something broken in my jQuery. Also, maybe I have too many non-useful lines of code here. Please correct me if you can.
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
this.parent.siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
$(document).mouseup(function (e) {
// if the target of the click isn't the menu nor a decendant of the menu
if (!menu.is(e.target) && menu.has(e.target).length === 0) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
// hide menu when clicking on links
$('.menu a').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
.is-hidden {
display: none;
}
.is-visible {
display: block;
}
.active {
background: green;
}
.main_nav {
padding: 0;
}
.main_nav li {
display: inline-block;
position: relative;
width: 180px;
background: grey;
text-align: center;
}
.main_nav li a {
display: block;
padding: 30px 0 1px;
cursor: pointer;
text-decoration: none;
}
.menu {
background: grey;
width: 1000px;
height: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu is-hidden" id="link_1">
Content 1
</div>
<div class="menu is-hidden" id="link_2">
Content 2
</div>
<div class="menu is-hidden" id="link_3">
Content 3
</div>
<div class="menu is-hidden" id="link_4">
Content 4
</div>
<div class="menu is-hidden" id="link_5">
Content 5
</div>
<div class="menu is-hidden" id="link_6">
Content 6
</div>
Here is a pen containing the code for this example.
What you really want is, just hide other divs except the selected one, when you click on the respective link and again hide it with second click.
Well It doesn't need that kind of messy javascript code
$(function(){
$('.clicker').click(function(e){
$('.menu').hide();
$('#link_'+$(this).attr('target')).toggle();
});
});
.menu{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Main navigation -->
<ul class="main_nav">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
</ul>
<!-- Div's -->
<div class="menu" id="link_1">
Content 1
</div>
<div class="menu" id="link_2">
Content 2
</div>
<div class="menu" id="link_3">
Content 3
</div>
<div class="menu" id="link_4">
Content 4
</div>
<div class="menu" id="link_5">
Content 5
</div>
<div class="menu" id="link_6">
Content 6
</div>
.
I think this must be a complete solution for your problem.
It seems that your onClick function on anchors are not working exactly as you had in mind. Here's what I'm going to do:
First, let's get rid of other functions, mouseup and menu click. You can elaborate on those matters later.
For the problem at hand, your anchor click function, just toggle the divs. You can select which div to show/hide by using the hrefs.
Just remove the dash from the href and sent it to jQuery selector. Then you can toggle it. I seperated the code into multiple lines for the sake of understanding.
Hope this helps.
anchor.click(function() {
var href = $(this).attr("href").replace('#', '');
var div = $('#' + href);
$('div.menu').not(div).hide();
$(div).toggle();
});
Here's a pen
The solution finds me. Only JS below:
// Dropdown menu functionality
var anchor = $('.main_nav li a');
var menu = $('.menu');
anchor.click(function () {
if ($(this.getAttribute('href')).hasClass('is-visible')) {
$(this).parent().siblings().removeClass('is-visible');
menu.not(this).removeClass('is-visible').addClass('is-hidden');
} else {
$(this).addClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
anchor.not(this).removeClass('active');
$(this.getAttribute('href')).removeClass('is-hidden').addClass('is-visible');
}
return false;
});
// close menu when clicking on links or button inside of it
$('.menu a, .menu button').click(function () {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
});
// close menu when clicking inside of it
$('body').click(function(e) {
var el = e.target || e.srcElement;
// if the target of the click isn't the other menu nor navigation link
if (!$(el).closest('.menu').length && !$(el).closest('.main_nav li a').length) {
anchor.removeClass('active');
menu.removeClass('is-visible').addClass('is-hidden');
}
});
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');
});
});