In my Code i have 10 different list items i want to show the currently clicked item in Red colour as if the current item changed the colour should revert back to Default colour.Is there any way to do it ??
$(this).css("color","red");
I used this inside my "click" event to change the current element's colour.
Reset all other li elements before applying css
$('li').on('click', function() {
$('li').css('color', '');//WIll remove `color` css from all `li` elements
$(this).css('color', 'red');//Will apply `red` to current element
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>Note: As suggested by others, playing with class is better habit
$('li').on('click', function() {
$('li.red').removeClass('red');//Will remove `red` class from `li Element` having class as `red`
$(this).addClass('red');//Add class to clicked element
});.red {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
$(this).css("color","red");
Before this set all elements color to default for Example if list of items has class name myclass you can set
$(".myclass").css("color","red");
You can do it like this:
$(this).css("color", "");
...but rather than using direct styling, in general I'd suggest using a class and adding it (addClass) when you want those styles applied, and removing it (removeClass) when you want them removed. toggleClass is also really handy.
Example of both:
var direct = false;
var usingClass = false;
$("#direct").on("click", function() {
direct = !direct;
if (direct) {
$(this).css("color", "red");
} else {
$(this).css("color", "");
}
return false;
});
$("#using-class").on("click", function() {
usingClass = !usingClass;
$(this).toggleClass("the-class", usingClass);
return false;
});.the-class {
color: red;
}<p>Click to toggle.</p>
<p id="direct">Direct</p>
<p id="using-class">Using class</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
use Jquery toggleClass
<a class="default" onclick="changeColor(this)">default</div>
function changeColor(cntrl)
{
$(cntrl).toggleClass ("red");
}
.default
{
}
.red
{
}
i want to show the currently clicked item in Red colour as if the current item changed the colour should revert back to Default colour
You can use <a> element, :target, adjacent sibling + selectors, css animation. f requirement is to set color until a sibling li element is clicked, remove animation, set color at selector
a {
text-decoration: none;
color: inherit;
cursor: default;
display: block;
position: relative;
top: 18px;
width: 100px;
height: 18px;
}
a + div {
font-size: 18px;
}
:target + div {
animation: togglecolor 5s linear 0s forwards;
}
@keyframes togglecolor {
from {
color: red;
}
to {
color: initial;
}
}<ul>
<li>
<a id="1" href="#1"></a>
<div>link 1</div>
</li>
<li>
<a id="2" href="#2"></a>
<div>link 2</div>
</li>
<li>
<a id="3" href="#3"></a>
<div>link 3</div>
</li>
<li>
<a id="4" href="#4"></a>
<div>link 4</div>
</li>
<li>
<a id="5" href="#5"></a>
<div>link 5</div>
</li>
<li>
<a id="6" href="#6"></a>
<div>link 6</div>
</li>
<li>
<a id="7" href="#7"></a>
<div>link 7</div>
</li>
<li>
<a id="8" href="#8"></a>
<div>link 8</div>
</li>
<li>
<a id="9" href="#9"></a>
<div>link 9</div>
</li>
<li>
<a id="10" href="#10"></a>
<div>link 10</div>
</li>
</ul>