I need to change the class of div(#pension) when I click <li> inside div(#age).
Example: When li with class under60 is clicked, add class under to div(#pension) and when li with class over60 is clicked, add class over to div(#pension).
<div id="age" class="uf-filter">
<div class="uf-title">age</div>
<ul class="uf-tags">
<li class="under60">under60</li>
<li class="over60">ove60</li>
</ul>
</div>
<div id="pension" class="uf-filter">
<div class="uf-title">pension</div>
<ul class="uf-tags">
<li class="yes">yes</li>
<li class="no">no</li>
</ul>
</div>
<script>
$(document).ready(function(){
$('#age li').click(function() {
$( '#pension' ).removeClass( "active" );
$(this).addClass('active');
});
});
</script>
Make use of class of li - over60 and under60
<style>
.under {
background-color: green;
}
.over {
background-color: red;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
<div id="age" class="uf-filter">
<div class="uf-title">age</div>
<ul class="uf-tags">
<li class="under60">under60</li>
<li class="over60">ove60</li>
</ul>
</div>
<div id="pension" class="uf-filter">
<div class="uf-title">pension</div>
<ul class="uf-tags">
<li class="yes">yes</li>
<li class="no">no</li>
</ul>
</div>
<script>
$(document).ready(function() {
$('.under60').click(function() {
$('#pension').removeClass("over");
$('#pension').addClass("under");
});
$('.over60').click(function() {
$('#pension').removeClass("under");
$('#pension').addClass("over");
});
});
</script>
Try the following
$('.under60').on('click', function(){
$('#pension').addClass('under');
});
$('.over60').on('click', function(){
$('#pension').addClass('over');
});
Hope this helps.
Related
HTML:
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Jquery:
$("header .menu-icon").click(function() {
$(".menu-drop").slideToggle();
});
CSS:
.menu-drop {
display: none;
}
I want when click outside .menu-drop and .menu-icon then .menu-drop div hide
when clicking menu-drop div it will stay not hide.
Use mouseup with document like below.
const $menu = $('.menu-icon, .menu-drop');
$(document).mouseup(e => {
if (!$menu.is(e.target) &&
$menu.has(e.target).length === 0) {
$(".menu-drop").hide();
}
});
$('.menu-icon').on('click', () => {
$(".menu-drop").slideToggle();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
On document click, you can check whether the clicked element has the specific class or not, if it does not have the class slideUp() the menu. You also have to prevent the event propagation on clicking the menu.
$(".menu-icon").click(function(e) {
e.stopPropagation();
$(".menu-drop").slideToggle();
});
$(document).click(function(e) {
if(!$(e.target).hasClass('menu-right') && !($(e.target).hasClass('menu-drop')|| $(e.target).parents('.menu-drop').hasClass('menu-drop'))){
$(".menu-drop").slideUp();
}
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Use a single event listener on the body. Query the event target and show and hid the menu as required.
$(document).ready(function() {
/*Add event listener to document*/
$(document).click(function(event) {
//If the target is the icon, toggle the menu
console.log(event.target);
console.log($(event.target).closest(".menu-drop").length)
if(event.target.matches(".menu-icon"))
{
$(".menu-drop").slideToggle();
}
//Otherwise if outside the menu, slide up
else if($(event.target).closest(".menu-drop").length === 0 )
{
$(".menu-drop").slideUp();
}
});
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
Here some modification
$(".menu-icon").click(function(e) {
$(".menu-drop").slideDown();
});
$(document).on('click', function (e) {
if(!$(e.target).hasClass('menu-icon'))
$(".menu-drop").slideUp();
});
.menu-drop {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu-right">
<img class="menu-icon" src="images/menu-icon.jpg" alt="menu">
<div class="menu-drop">
<ul>
<li>ABOUT</li>
<li>SERVICES</li>
</ul>
</div>
</div>
how to scroll focus a particular div having same class name or same attribute, when click on li have class name list1 then the scroll need to focus on div class list1
<ul>
<li class="list1">list1</li>
<li class="list2">list1</li>
<li class="list3">list1</li>
</ul>
<div class="list1"></div>
<div class="list2"></div>
<div class="list3"></div>
Hi You can try this solution.
<ul>
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
</ul>
<div id="list1">list1</div>
<div id="list2">list2</div>
<div id="list3">list3</div>
Check this solution. it will definitely help you.
<script>
jQuery(document).ready(function(){
jQuery('ul li').click(function(){
var myClass = jQuery(this).attr("class");
jQuery("html, body").animate({ scrollTop: jQuery('div.'+myClass).offset().top }, 1000);
return false;
});
});
</script>
<ul>
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
</ul>
<div class="list1">list1</div>
<div class="list2">list2</div>
<div class="list3">list3</div>
Try this, it works for me!
$(document).ready(function () {
$(".menu li").click(function () {
var activeLink = $(this).attr('class');
var activeElementPosition = $('div.' + activeLink).position();
$('body').animate({
scrollTop: activeElementPosition.top
}, 300);
});
});
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<ul class="menu">
<li class="list1">list1</li>
<li class="list2">list2</li>
<li class="list3">list3</li>
</ul>
<div class="list1"></div>
<div class="list2"></div>
<div class="list3"></div>
I would like #profile-menu to start as .hidden and when the user clicks .profile-toggle it should remove or add the .hidden class. How can I make this work in jQuery?
Here is what I have tried.
HTML:
<div class="main">
<div class="container">
<div class="nav-bar">
<button class="profile-toggle" type="button" data-toggle="dropdown">Profile</button>
<button type="button">Sign up</button>
</div>
</div>
</div>
<ul class="side">
<li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>
JavaScript:
$(".profile-toggle").click(fucntion() {
if ($(".side li#profile-menu").is(".hidden")) {
$(".side li#profile-menu").removeClass("hidden");
$(".side li#profile-menu").addClass("show");
}
else {
$(".side li#profile-menu").addClass("hidden");
$(".side li#profile-menu").removeClass("hidden");
}
});
jQuery has a function called .toggleClass()
Just use:
$(".side li#profile-menu").toggleClass("hidden");
There is a spelling mistake in function(you have fucntion), but it can be simplified to
jQuery(function($) {
$(".profile-toggle").click(function() {
$("#profile-menu").toggleClass("hidden show")
});
})
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button class="profile-toggle">profile-toggle</button>
<ul class="side">
<li id="profile-menu" class="hidden">TOGGLE THIS MATE</li>
</ul>
Remove the class and add style or define the class as -
.hidden {display: none;}
HTML
<ul class="side">
<li id="profile-menu" style="display:none;">TOGGLE THIS MATE</li>
</ul>
Use toggle().
$(".profile-toggle").click(fucntion() {
$(".side li#profile-menu").toggle();
});
I want to highlight currently opening page using css styles.here is my html code
<ul class="nav" id="nav">
<li id="home">
Home
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
<iframe name="ifrm"></iframe>
It should be only change the font and background color of menu list ,witch page is loading in the iframe.
$(function(){
$('li a').click(function(){
$('li a').each(function(a){
$( this ).removeClass('selectedclass')
});
$( this ).addClass('selectedclass');
});
$('ul a').click(function(){
$('ul a').each(function(a){
$( this ).removeClass('selectedclass')
});
$( this ).addClass('selectedclass');
});
});
li a.selectedclass
{
color:red;
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav" id="nav">
<li id="home">Home
<ul>
<li >item1</li>
<li >item2</li>
<li >item3</li>
</ul>
</li>
<li id="skill">Skill</li>
<li id="research">Research</li>
<li id="link">Link</li>
</ul>
<iframe name="ifrm"></iframe>
You need to define first a class that has required styles and then click of anchor tag remove this class from all the class and then add it to the clicked anchor tag.
Add this code in your file
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$("a").click(function(){
$("a").css("color","BLUE"); // change this color to default one
$( this ).css( "color", "RED" );
});
</script>
i want to add some content to ul class="overl" of whose parent li has been clicked and remove innerhtml of any previous li that was clicked?
<html>
<head>
<link rel="stylesheet" type="text/css" href="testtab.css"/>
<script type="text/javascript" src="scripts/jquery-1.10.1.min.js"></script>
<script>
$(document).ready(function(){
$('#chat ul li a').on('click', function (e) {
($(this).innerHTML="");
//var i=$(this).closest('li').index();
});
});
</script>
</head>
<body>
<div id="chat" class="chat">
<ul class="chatmenu">
<li id="one" class="users">abcy<span class="notify">1 new*</span>
<div class="chattng">
<ul class="overl">
</ul>
</div>
</li>
<li id="two" class="users">avvv<span class="notify">a</span>
<div class="chattng">
<ul class="overl">
</ul>
</div>
</li>
<li id="three" class="users">gtt<span class="notify">d</span>
</li>
<li id="four" class="users">trt<span class="notify">e</span></li>
<li id="five" class="users">kkk<span class="notify">f</span></li>
</ul>
</div>
</body>
</html>
once it's known then how to do that whichever li is clicked it's innerhtml gets something and the previous li that was clicked has innerthtml as null?
You're mixing up DOM methods and jQuery selectors:
$(this).innerHTML=""
Must be
$(this).html("") // or $(this).empty()
Then, since you want to clear up your li, you'd want to do this :
$(this).parent().html("") // or $(this).parent().empty()
Try binding click on $(document).ready();
Like
$(document).ready(
function(){
$('.overl').html("");
$('#chat ul li a').on('click', function (e) {
$(this).parent().children('.chattng').children('.overl').html("Your message");
});
});