It is a tabs, the active tab has a red dot and the inactive tab has grey dot but when i click the grey dot it will turn red all dot (remove all inactive class). Why happens this?
<div id="tabs">
<div class="dots">
<div class="dot"></div>
<p id="tab1" class="menu">Profile</p>
</div>
<div class="dots">
<div class="dot"></div>
<p id="tab2" class="menu">The Dic Approach</p>
</div>
<div class="dots">
<div class="dot"></div>
<p id="tab3" class="menu">The partners</p>
</div>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
Javascript
$(document).ready(function() {
$("#tabs .dots .dot:not(:first)").addClass("inactive");
$('.container').hide();
$('.container:first').show();
$("#tabs .dots .menu").click(function(){
var t = $(this).attr("id");
if($(".dot").hasClass("inactive")){
$(".dot").addClass("inactive");
$(".dot").removeClass("inactive");
$(".container").hide();
$("#" + t + "C").fadeIn("slow");
}
})
});
If you change
$(".dot")
to
$(this).closest(".dots").find(".dot")
(or similar) then it will use the dot that matches the currently clicked-on menu
Updated snippet:
$("#tabs .dots .dot:not(:first)").addClass("inactive");
$('.container').hide();
$('.container:first').show();
$("#tabs .dots .menu").click(function(){
var t = $(this).attr("id");
var dot = $(this).closest(".dots").find(".dot");
if (dot.hasClass("inactive")){
$(".dot").addClass("inactive");
dot.removeClass("inactive");
$(".container").hide();
$("#" + t + "C").fadeIn("slow");
}
})
.dot { color: red; float:left; }
.dot.inactive { color: #CCC; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tabs">
<div class="dots">
<div class="dot">[.]</div>
<p id="tab1" class="menu">Profile</p>
</div>
<div class="dots">
<div class="dot">[.]</div>
<p id="tab2" class="menu">The Dic Approach</p>
</div>
<div class="dots">
<div class="dot">[.]</div>
<p id="tab3" class="menu">The partners</p>
</div>
</div>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
when you are using global selector like $(".dot") it's get all elements with that (dot) class name
Related
I have the following html
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I try jquery to move "info" class, which has the previous class "swatch-option selected", at the end of the closing div class "options"
So my final html should be like
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
<div class="info">Text</div>
</div>
The jquery I tried is the following but it does not move the info class, which has the previous class swatch-option selected
<script>
require([
'jquery'
], function ($) {
$(document).ready(function(){
$('.selected.info').appendTo('.options');
})
})
</script>
$('.selected.info') means to search for an element that has both selected and info classes but they are siblings in your example.
You can use the adjacent sibling selector (+)
$(document).ready(function() {
$('.selected + .info').appendTo('.options');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="options">
<div class="container">
<div class="swatch-option selected"></div>
<div class="info">Text</div>
</div>
<div class="container">
<div class="swatch-option"></div>
<div class="info">Text2</div>
</div>
</div>
I want to create a function where I will be able to hide a tab if it's empty, based on tab's content-id.
$(function() {
$('.bdt-switcher-item-content').children().each(function() {
if ($(this div).is(':empty'))
$('div[content-id="' + $(this).attr('content-id') + '"]').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-switcher-wrapper">
<div id="bdt-tab-content-a49ef84" class="bdt-switcher bdt-switcher-item-content">
<div content-id="tab-1" class="">
<div></div>
</div>
<div content-id="tab-2" class="bdt-active">
<div>I am tab #2 content</div>
</div>
<div content-id="tab-3" class="">
<div> I am tab #3 content.</div>
</div>
</div>
</div>
I think you wrong here:
$(this div)
See my example, you must declare what you want so in this case "div" before use this.
Work example:
$(function() {
$('.bdt-switcher-item-content').children().each(function() {
if ($("div",this).is(':empty'))
$('div[content-id="' + $(this).attr('content-id') + '"]').hide();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bdt-switcher-wrapper">
<div id="bdt-tab-content-a49ef84" class="bdt-switcher bdt-switcher-item-content">
<div content-id="tab-1" class="">
<div></div>
</div>
<div content-id="tab-2" class="bdt-active">
<div>I am tab #2 content</div>
</div>
<div content-id="tab-3" class="">
<div> I am tab #3 content.</div>
</div>
</div>
</div>
How to add class from multiple div with class "abcd+n" to another div with class "qwer+n"
for example:
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
.........
</div>
and
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
.........
</div>
On click "CLICK" from "secondlistitem-2" add in "firstlistitem-2" class "incorrect" or "correct"
You can try the following way:
$('.secondlist .ad_linkk').click(function(){
var cls = $(this).prev('div').attr('class');
var p = $(this).parent().attr('class').split('-')[1];
$('.firstlist').find(`a[class*=${p}]`).addClass(cls);
});
.incorrect{ color: red }
.correct{ color: green }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">corect answer</div>
<div class="ad_linkk">CLICK</div>
</div>
</div>
You can find the appropriate class to add to the link by seeing if the clicked link has a sibling with class .correct. If not, the class must be incorrect. You can then use the .index in the second list of the parent of the link to indicate which of the elements in the first list to highlight:
$('.ad_link').on('click', function() {
let cc = $(this).siblings('.correct').length ? 'correct' : 'incorrect';
let index = $(this).parent().index();
$('.firstlist').children().eq(index).addClass(cc);
});
.correct { color : green; }
.incorrect { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="firstlist">
<a class="firstlistitem-1" ref="#">link1</a>
<a class="firstlistitem-2" ref="#">link2</a>
<a class="firstlistitem-3" ref="#">link3</a>
</div>
<div class="secondlist">
<div class="secondlistitem-1">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-2">
<div class="incorrect">incorrect answer</div>
<div class="ad_link">CLICK</div>
</div>
<div class="secondlistitem-3">
<div class="correct">correct answer</div>
<div class="ad_link">CLICK</div>
</div>
</div>
I have this script so that I can make tabs very easy. But I can't have two, three, four and so on - tab function on the same page. I've tried to wrap into an each.function, but I just don't work for me. The tab changes on both rows at the same time :/
I use WordPress so the HTML markup is a little long so I've created a Codepen.
I also want this: if you click on the selected tab, I want it to be not active, like an accordion.
Markup here:
(function($) {
$('.section .row').each(function() {
$(this).find('.nav_wrap .tab').on('click', function() {
show_content($(this).index());
});
});
show_content(99); // choose 0 to start with first tab
function show_content(index) {
$('.row').each(function() {
// Make the content visible
$(this).find('.content_wrap .content.visible').removeClass('visible');
$(this).find('.content_wrap .content:nth-of-type(' + (index + 1) + ')').addClass('visible');
// Set the tab to selected
$(this).find('.nav_wrap .tab.selected').removeClass('selected');
$(this).find('.nav_wrap .tab:nth-of-type(' + (index + 1) + ')').addClass('selected');
});
}
})(jQuery);
.row {
background: lightblue;
margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
display: flex;
}
.tab, .content {
padding: 20px;
}
.tab {
cursor: pointer;
}
.tab:hover,
.tab.selected {
background:pink;
}
.content_wrap .content {
display: none;
}
.content_wrap .content.visible {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
</div>
Find the index of clicked element and add class to next content of clicked element based on clicked element index. Here I have updated your above code into one function. And I have checked if the clicked has selected class or not with hasClass() method. I guess this is what you are looking for.
(function($) {
$('.nav_wrap .tab').on('click', function() {
if(!$(this).hasClass('selected')) {
$(this).parent().find('.selected').removeClass('selected');
}
$(this).toggleClass('selected');
if(!$(this).parent().next().find('.content').eq($(this).index()).hasClass('visible')) {
$(this).parent().next().find('.visible').removeClass('visible');
} $(this).parent().next().find('.content').eq($(this).index()).toggleClass('visible');
});
})(jQuery);
.row {
background: lightblue;
margin-bottom: 80px;
}
.nav_wrap, .content_wrap {
display: flex;
}
.tab, .content {
padding: 20px;
}
.tab {
cursor: pointer;
}
.tab:hover,
.tab.selected {
background:pink;
}
.content_wrap .content {
display: none;
}
.content_wrap .content.visible {
display: flex;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section">
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
<div class="row">
<div class="nav_wrap">
<div class="tab">Tab 1</div>
<div class="tab">Tab 2</div>
<div class="tab">Tab 3</div>
</div>
<div class="content_wrap">
<div class="content">Tab 1 content goes here</div>
<div class="content">Tab 2 content goes here</div>
<div class="content">Tab 3 content goes here</div>
</div>
</div>
</div>
I am trying to select the last 3 divs using JQuery so far I've tried. But it doesn't seem to work
$(document).ready(function(){
$( "div.span4:nth-child(6), div.span4:nth-child(7), div.span4:nth-child(8)" ).
addClass( "myClass" );
});
<div class="row-fluid">
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
<div class="span4"></div>
</div>
Try this:
$('.span4:gt(-4)').hide();
// It's simply "greater than fourth one from the end" ;)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Seems working with nth-child(): http://jsfiddle.net/3b8su8f4/
$(document).ready(function(){
$( "div.span4:nth-child(6),div.span4:nth-child(7),div.span4:nth-child(8) " ).addClass( "myClass" );
});
nth-last-child should do?
$('div.span4:nth-last-child(-n+3)').addClass('myClass');
.span4 {
background: #666;
}
.myClass {
background: #0cc;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
Use the :gt() selector
var divLength = $('div.span4').length;
$('div.span4:gt(' + (divLength - 4) + ')').hide();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="row-fluid">
<div class="span4">1</div>
<div class="span4">2</div>
<div class="span4">3</div>
<div class="span4">4</div>
<div class="span4">5</div>
<div class="span4">6</div>
<div class="span4">7</div>
<div class="span4">8</div>
</div>
You can use:
$('div.span4').slice(-3).addClass('myClass');
jsfiddle