How to change css class from javascript? - javascript

Suppose I want to dynamically via javascript or jquery change the class of the following to class="active" How do I achieve it?
<!-- Navigator -->
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress</li>
<li>Careers</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us</li>
</ul>
</div>
</div>
</div>
I want to actually know how can I change the class of the li tag?
<li class="active">
I know that there is a method that I can use http://api.jquery.com/addclass/
But how do I do it with my example above.

For Adding class in any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").addClass('active');
For Removing class from any HTML Element
$("#id_of_element, .class_of_element, directly_name_of_element").removeClass('active');

If i understand your expected behaviour, you could delegate event to UL element for using following logic on LI click:
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
-DEMO-
$(function () {
$("#yw0").on('click', 'li:not(.active)', function () {
$(this).add('li.active').toggleClass('active');
});
});
li.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div style="position: abolute; top: 50px" class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<ul id="yw0" class="nav">
<li class="active">Company
</li>
<li><i class="fa fa-lightbulb-o"></i>&nbspFAQs
</li>
<li><i class="fa fa-question-circle"></i>&nbspHelp Center
</li>
<li><i class="fa fa-newspaper-o"></i>&nbspPress
</li>
<li>Careers
</li>
<li><i class="fa fa-envelope-o"></i>&nbspContact Us
</li>
</ul>
</div>
</div>
</div>

http://api.jquery.com/addclass/
In JQuery.
$("li").addClass("active");
You will need a better selector for getting the li you require.

$("li").addClass("active");
And in your CSS just have
.active {
background: red;
}
Although your best bet is to know which is active and just append that class to the li tag on the respective page, assuming you're talking about navigation: for example, on your help-center.html, just add
<li class="active"> rather than <li>

You can add classes easily with jquery using add class, and remove with, yep you guessed it, remove class
If you want to change a class, simple remove the old one and add the new
$('#something').removeClass.('oldClass').addClass('newClass');
N.b. links are to jquery docs

Below code will add the class to the last li..
$(document.ready(function() {
$('.container li:last-child').addClass('active');
});

To select an item by class:
$('.active').addClass('.non-active');
$('.active').removeClass('.active');
To select an item by type:
$('li').addClass('.non-active');
$('ii').removeClass('.active');
To select an item by id:
$('#some_id').addClass('.non-active');
$('#some_id').removeClass('.active');

Related

On mouseenter target a single item

<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span></li>
I have a list of items and I want the display to delete icon to the Mouse Enter li(current li) items by default that delete icon will be hidden.
Thanks
You can do it using CSS only (disaply the delete icon if the mouse is on the item),
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="mouseEnter()"
(mouseleave)="mouseLeave()"
(click)="onItemClick($event)">{{ item.expire }}
<label class="delete-icon" (click)="onDelItem()">
<i class="fa fa-remove"></i>
</label>
</li>
</ul>
in CSS:
.delete-icon {
display: none;
}
.list-group-item:hover .delete-icon {
display: block !important;
}
One of easiest way :- Try this
<ul class="list-group" *ngFor="let item of items; index as i">
<li class="list-group-item"
(mouseenter)="item.toggle = true"
(mouseleave)="item.toggle = false"
(click)="onItemClick($event)">{{ item.expire }}
<span *ngIf="item.toggle">
<label (click)="onDelItem()"><i class="fa fa-remove"></i></label>
</span>
</li>
</ul>
Try Following
I tried Angular JS first time so so please try to undersrand and Let me know its working or not
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 0;
$scope.mouseenter=function($event)
{
var SpanEle=angular.element('<span class="CrossSpan")"><i class="fa fa-remove" style="color:red"></i></span>');
$event.target.append(SpanEle[0]);
}
$scope.mouseleave=function($leave)
{
angular.element(document.querySelector('.CrossSpan')).remove();
}
$scope.SpanClick=function()
{
debugger;
alert('click');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">First</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Second</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Third</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fourth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Fifth</li>
<li ng-mouseenter="mouseenter($event)" ng-mouseleave="mouseleave($leave)">Sixth</li>
</ul>
</div>
Try Following Using jquery
You can see Cross on Hover & Can Perform Action on Cross click
//For showing Cross on Hover
$("li").hover(function(){
$(this).append('<span class="CrossSpan"><i class="fa fa-remove"></i></span>');
}, function(){
$(".CrossSpan").remove();
});
//For Click Event
$("li").click(function(){
alert('Cross Clicked');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
<li>Forth</li>
<li>Fifth</li>
<li>Sixth</li>
</ul>
You should use CSS for such requirements. Handling events can get messy.
Following is a sample of an element being shown on hover:
li > span {
display: none;
}
li:hover > span {
display: block;
}
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
<li class='myCustomLI'>
<label class='myCustomLI-label'>Dummy Label</label>
<span class='myCustomLI-deleteIcon'>Test</span>
</li>
Note: I know original question is based on Angular JS, but the requirement is not dependent of Angular and can be achieved using just CSS. This is what above answer depicts. If there is anything incorrect/inappropriate, please comment it along with your vote. A silent vote does not help anyone.

select elements by condition using jquery

I am having a ul with li and <i> tag as children. The code is as below
<li class="accordion put">
<span><i class="fa fa-plus-circle"></i></span><span style="padding-left:5px;font-size: 18px;">Topic-Heading</span>
<ul class="panel2" style="display: none;">
<li class="testing"><i class="fa fa-chevron-right"></i> section 1</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 2 </li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 3</li>
<li class="testing"><i class="fa fa-chevron-right"></i> section 4 </li>
</ul>
</li>
I have the below jquery code to toggle the class on click on the li as shown below:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
});
The above code is working fine when I click on the li tag but since I have mentioned find('i') both the i tags are changing. I need to toggle only the i element having the class as fa-plus-circle and to ignore the i with class fa-chevron-right.
Please let me know where I am going wrong.
If you want a class independent way of selecting the first <i>, you can use .first() to reduce the matched results to the first returned <i> only.
In your case you could replace this line:
$(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
With this:
$(this).find("i").first().toggleClass("fa-plus-circle fa-minus-circle");
A generic example:
$('body').on('click', function() {
console.log( $(this).find('i').first().text() )
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Click anywhere to return the contents of the first <code><i></code>.</p>
<i class="first">First</i>
<i class="second">Second</i>
<i class="third">Third</i>
You can use the same syntax in find() as with other jQuery selectors. Just specify the class:
$(".put.accordion" ).click(function() {
$(this).children("ul").toggle("slow");
$(this).find("i.fa-plus-circle i.fa-minus-circle").toggleClass("fa-plus-circle fa-minus-circle");
});
You can find with :
find("i[class=fa-plus-circle]")
Detail in : https://www.w3schools.com/cssref/css_selectors.asp. hope to help you

Mobile navigation with sliding dropdown menu

i'm trying to create a seperate mobile navigation for a website i'm creating. this is the basic html layout right now
<nav class="mobile-navigation">
<ul class="header-mobile">
<li>
<i class="fa fa-bars" aria-hidden="true"></i>
</li>
<li>
<img src="{$WEB_ROOT}/templates/{$template}/img/logo/logo.svg" alt="logo">
</li>
<li>
<ul>
<li><span class="icon icon-nav-account"></span></li>
<li>
<a href="{$WEB_ROOT}/cart.php?a=view">
<span class="icon icon-cart"></span>
<span class="notification-amount">{$cartitemcount}</span>
</a>
</li>
</ul>
</li>
</ul>
</nav>
<div class="row">
<ul class="nav-mobile">
<li>About us</li>
<li>Services</li>
<li>Domains</li>
<li>Support</li>
</ul>
</div>
with a simple script to toggle the menu
$('.fa-bars').click(function(evt) {
$('.nav-mobile').slideToggle('down');
});
Now i'm trying to create something where if a list item is chosen, the dropdown is displayed like the images below.
first list -->
second list with selected item
anyone an idea how i achieve this?
First of all you should change your arrow's direction and position. or create two of them one on left and one on right then when user clicks on a li toggle class clicked or something else to that li element(if you want others to collapse you should remove clicked class). Then in css
li > ul{
display:none;
}
li .left-arrow{
display:none;
}
li.clicked > .left-arrow{
display:inline;
}
li.clicked > ul{
display: block;
}
should do the trick

Hide my menu using jquery

I have the following bootstrap html menu:
<ul class="nav navbar-top-links navbar-right">
<li class="dropdown menustatus">
<a class="dropdown-toggle" href="#">
<div class="busy-status"></div>
<div class="online-status" style="display:none;"></div>
</a>
<ul class="dropdown-menu dropdown-user" style="margin-top: 10px;">
<li class="status">
<i class="fa fa-circle online"></i> Online
</li>
<li class="status">
<i class="fa fa-circle busy"></i> Busy
</li>
</ul>
</li>
</ul>
I'm trying to hide the menu when the user click on any item, like this:
$("#online-status").click(function (){
$(".busy-status").hide();
$(".online-status").show();
$("li.dropdown.menustatus.open").removeClass("open");
});
$("#busy-status").click(function (){
$(".online-status").hide();
$(".busy-status").show();
$("li.dropdown.menustatus.open").removeClass("open");
});
But it does not work.
I also tried:
$(".dropdown.menustatus.open").removeClass("open");
or
$("dropdown.menustatus").removeClass("open");
or
$(".menustatus").removeClass("open");
or
$(".open").removeClass("open");
But I couldn't hide the menu.
What I'm doing wrong.
Thanks for your help
#online-status is an anchor.
Try:
$("#online-status").click(function(e){
e.preventDefault();
....
});
Check how you did it with the other elements in the click events: You can in a similar way use .hide() and .show(), or even .toggle() if needed.
$(".menustatus").hide();
How specific the selector needs to be is up to you to decide / find out.
If you absolutely want to do it the "class way", my guess is that your ".open" class sets the visibility or display properties to visible/block or something similar to show the element, but your ".menustatus" does not seem to hide it. What I mean is: if you remove the .open class from the element, there is nothing that specifies whether it should be hidden or not. Try this:
.menustatus {
display: none;
}
.menustatus.open {
display: block; // Add !important if needed.
}
Change "block" to whatever you want, as long as it's not none.

Selecting Closest Match using jQuery

I am having trouble selecting the closest match. I already tried .closest, .next, and .nextall; I also tried using (this), but I think I'm using them incorrectly.
Here's what I want to acheive:
When .show is clicked, the closest .list-content will toggle and the closest toggleClass icon-rotate-180 too.
<ul class="list-unstyled">
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
<li class="list-menu">
<a href="javascript:void(0);" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
</li>
<li class="list-content">Hidden Content until Clicked</li>
</ul>
<script>
$(document).ready(function() {
$(".list-content").hide();
$(".show").click(function() {
$(".icon-chevron-down").toggleClass("icon-rotate-180");
$(".list-content").toggle();
});
});
</script>
Firstly, your HTML is invalid as you cannot have a div element as a direct child of a ul. With that in mind, try this:
<ul class="list-unstyled">
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
<li class="list-menu">
<a href="#" class="show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</a>
<div class="list-content">Hidden Content until Clicked</div>
</li>
</ul>
$(".show").click(function(e) {
e.preventDefault();
$(".icon-chevron-down", this).toggleClass("icon-rotate-180");
$(".list-content", $(this).closest('li')).toggle();
});
ul/li is the wrong case here. The second li is in relation to the first li. Please use dl, dd and dt instead - this is not the perfect match but better than ul/li!
a is for links but you dont call a url. Please use the dd itself or a span so you dont need the javascript:void(0); and no e.preventDefault();.
Date of Operations
Hidden Content until Clicked
<dd class="list-menu show">
Date of Operations
<i class="icon-chevron-down pull-right"></i>
</dd>
<dt class="list-content">Hidden Content until Clicked</dt>
$(".show").click(function(e) {
$(this).closest(".icon-chevron-down").toggleClass("icon-rotate-180");
$(this).next("dt.list-content").toggle();
});
(i copied a part of RoyMcCrossan's answer from Selecting Closest Match using jQuery)
Sorry structure broken, looks like a bug in Stackoverflow.

Categories

Resources