HTML:
<ul>
<li data-target="#front-info" data-slide-to="0" class="col-md-4 col-width-fix front-info-button">
<h1>Heading One</h1>
</li>
<li data-target="#front-info" data-slide-to="1" class="col-md-4 col-width-fix front-info-button">
<h1>Heading Two</h1>
</li>
<li data-target="#front-info" data-slide-to="2" class="col-md-4 col-width-fix front-info-button">
<h1>Heading Three</h1>
</li>
</ul>
CSS:
.front-info-button:hover, .front-info-button:active
{
background-color:#666;
}
It reacts to hover but it won't maintain the color after I've clicked and moved my mouse away. What am I missing?
You could add that behaviour inside javascript. The example below uses jquery to accomplish this:
css
.selected {
background-color:#666;
}
js
$('ul li').click(function() {
$('ul li').removeClass('selected');
$(this).addClass('selected');
});
jsfiddle demo - http://jsfiddle.net/8ZvsF/
You can make it using jQuery:
$('li').hover(function(){
$(this).addClass("dark")
});
And the dark class:
.dark {
background-color:#666;
}
Here is a demo: http://jsfiddle.net/6nPu3/
In the event you're not using jQuery, try this JavaScript vanilla solution.
for (var i = 0, item = document.body.getElementsByTagName('li'); i < item.length; i++){
(item[i].attachEvent) ? item[i].attachEvent('onclick', function (){
item[i].className = item[i].class + ' ' + 'active';
}) : item[i].addEventListener('click', function () {
this.className = this.class + ' ' + 'active';
}, false);
};
Related
I have a menu including the following li
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
In this code, home page is actived. But want to enable active status when I click on my News page. How Can I do? Thanks for watching.
Please add Js like:
jQuery(document).ready(function () {
jQuery('.menu li a').click(function () {
//removing the previous selected menu state
jQuery('.menu li').find('a.active').removeClass('active');
//adding the state for this parent menu
jQuery(this).addClass('active');
});
});
a.active {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
You can use jQuery to do so, use the script below:
$(document).ready(function () {
$('.menu ul li a').click(function () {
// This will remove active class from other links
$('.menu ul li').find('a.active').removeClass('active');
// This will add active class to the link clicked
$(this).addClass('active');
});
});
Here is code using pure javascript
화이팅!!
function change(elem){
var list = document.querySelectorAll(".menu ul li a");
for (var i = 0; i < list.length; ++i) {
list[i].classList.remove('active');
}
elem.classList.add('active');
}
.active{
color:red;
}
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li>ABC</li>
</ul>
</div>
With some JS or JQuery , Add a click event on your links and call a method
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp" click="MyMethod">ABC</li>
</ul>
</div>
and in Jquery(or JS) :
perform this :
YourLinkClicked.removeClass('active');
YourLinkClicked.addClass('active');
Or just look at this link : http://jsfiddle.net/designaroni/E53t9/
Modifying #לבני מלכה's answer to
a) Be a11y
b) Work with frameworks (like svelte)
c) Use events instead of the element itself (better for accessibility).
d) Have JSDoc Comments (for whoever must revise my code when this is old and non-modern).
Here is the HTML markup (pure HTML) :
<div class="navbar">
<ul>
<li><a onclick="change(e)" class="active">Link 1</a></li>
<li><a onclick="change(e)">Link 2</a></li>
</ul>
</div>
Pure JS (w/ JSDoc):
/**
* This function is used in the navbar. It gives styles to the active link.
* #param {Event | Undefined} e Event (click event).
*/
const change = (e) => {
if (!e) e = window.event; // <-- for Chrome <89, Firefox (I forgot versions), and Safari.
// If you have been used to JS for a bit, you may think that {} needs to be used above, but no. In modern JS, this is unnecessary. Of course, for multi-line if statements, you do need the brackets.
let list = document.querySelectorAll(".navbar ul li a");
list.forEach(elem => {
elem.classList.remove("active");
});
// Note the below comment is only if you are using a type checker, if you aren't then you can remove this. (the comment).
// #ts-ignore
e.target.classList.add('active');
}
The best and easy way to do it:
Just listen event on parent of list (ul)
After click find old active element and remove class for it
Set active class for target of event
document.querySelector('ul').addEventListener('click', event => {
// remove old active
document.querySelector('.menu .active').classList.remove('active');
// set new active
event.target.classList.add('active');
})
a {
color: #ccc;
text-decoration: none;
}
.active {
color: blue;
}
<div class="menu">
<ul>
<li><a class="active">Home</a></li>
<li><a>News</a></li>
<li><a>ABC</a></li>
</ul>
</div>
Here is some basic function i use for my current MVC project.
Add this to the master page or shared pages, the js need to run each time the site reload.
and you need to use jquery
$(document).ready(function () {
// the current page url eg /index.jsp
var href = window.location.href.toLowerCase();
$(".menu").find("a").each(function () {
// find the current li that match the current Url
if (href.indexOf($(this).attr("href").toLowerCase()) != -1)
$(this).addClass("active"); // set the current li to active
})
})
.acive{
color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul>
<li>Home</li>
<li>News</li>
<li><a href="abc.jsp">ABC</li>
</ul>
</div>
Suppose one of my keys has value Green/Red and I want to show bootstrap btn-success when its value is green and btn-danger when its red.
You need to update ng-class
<div ng:controller="CartForm">
<ul>
<li ng-repeat='country in countries'><a class="btn" ng-class="{'btn-primary': country.color == 'green', 'btn-danger': country.color == 'red'}" href="">{{country.name}} - {{country.population}}</a></li>
</ul>
</div>
and delete appliedClass function
Working jsFiddle
I think you are looking for ng-class. You can use the following synthax:
<p ng-class="condition ? 'classIfTrue' : 'classIfFalse'">Foo</p>
In your case, it would be something like:
<p ng-class="myVariable ? 'btn-success' : 'btn-danger'">Foo</p>
As you did not provide a code sample, here is how it works with an example:
angular.module('app', []).controller('MyCtrl', function() {
this.valueSuccess = false;
this.valueDanger = true;
});
.danger { background-color: red; }
.success { background-color: green; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<section ng-app="app">
<div ng-controller="MyCtrl as vm">
<p ng-class="vm.valueSuccess ? 'danger' : 'success'"> {{vm.valueSuccess}}</p>
<p ng-class="vm.valueDanger ? 'danger' : 'success'">{{vm.valueDanger}}</p>
</div>
</section>
Here's a code
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
I want the link1's color to be changed when link2 is hovered.
Is it possible with css?.
Since CSS does not seem to be able to handle this, try JavaScript
window.onload=function() {
document.getElementById("link2").onmouseover=function() {
document.getElementById("link1").style.color="red";
}
document.getElementById("link2").onmouseout=function() {
document.getElementById("link1").style.color="blue";
}
}
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
Or using siblings
function prevSib(elem) {do { elem = elem.previousSibling;} while ( elem && elem.nodeType !== 1 ); return elem; }
window.onload=function() {
document.getElementById("link2").onmouseover=function() {
prevSib(this).style.color="red";
}
document.getElementById("link2").onmouseout=function() {
prevSib(this).style.color="blue";
}
}
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
Using pure css it is not possible go backward. You can go in cascading ways.
But, you can do it with JQuery. like:
$(document).ready(function(){
$(".link2").mouseover(function(){
$(".link1").css("color", "red");
});
$(".link2").mouseout(function(){
$(".link1").css("color", "black");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="link1" class="link1" href="#" >About</a>
<a id="link2" class="link2" href="#">Contact us</a>
Hope it helps.
CSS can't select the previous siblings. You can use JavaScript:
var links = [].slice.call(document.querySelectorAll('.menu_item'));
function hover(event) {
var pre = this.previousElementSibling,
method = event.type === 'mouseenter' ? 'add' : 'remove';
if (pre) {
pre.classList[method]('active');
}
}
links.forEach(function(el) {
el.addEventListener('mouseenter', hover);
el.addEventListener('mouseleave', hover);
});
The above code assumes that the a elements have class of menu_item and class of active should be added to the previous sibling of the hovered element.
Here is a demo.
Use JavaScript to do that( link1's color to be changed when link2 is hovered ). You need to use html tag attributes like onmouseover and onmouseout.
Try this code. For changing color of link1 when link2 is hovered.
<html>
<head>
<script>
function colorchange(){
document.getElementById("link1").style.color="red";
}
function colorchange2(){
document.getElementById("link1").style.color="blue";
}
</script>
</head>
<body>
<a id="link1" href="#" >About</a>
<a id="link2" onmouseover="colorchange()" onmouseout="colorchange2()" href="#">Contact us</a>
</body>
</html>
I suppose this is what are you looking for.
First you need to wrap your links inside a container like this
<div class='container'>
<a id="link1" href="#" >About</a>
<a id="link2" href="#">Contact us</a>
</div>
and then apply this styles
.container:hover a:not(:hover){
color:red;
}
css only demo here
UPDATE
As I said in may comment bellow I supposed you wanted to change the style of all unhovered links, however if you want to change only link1 when link2 is hovered , but not change style of link2 when link1 is hovered you could write you css like this
second demo
.container:hover a:first-child:not(:hover){
color:red;
}
I am developing a task in using phonegap and jquerymobile.
How should i do to change the color of a clickable item when i click on them?
I have written the code below:
$(".testbutton").click(function(){
$(".testbutton").css("background-color","yellow");
});
But the background color will only change yellow after i release my mouse on it. I wan it to change to yellow whenever my mouse is clicked on tat item, and recover to its original background color when i release the mouse.
Can anyone please help?
Is this what you're trying to accomplish?
Live Example:
http://jsfiddle.net/A2bd3/16/
CSS:
.task-bg-color {
background-color: yellow;
}
JS:
$('#clickAndHold').mousedown(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndHold').mouseup(function() {
$(this).children().removeClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndStick').click(function() {
$(this).children().addClass('task-bg-color');
$('ul#tasks').listview('refresh');
});
$('#clickAndToggle').click(function() {
if ($(this).children().hasClass('task-bg-color')) {
$(this).children().removeClass('task-bg-color');
} else {
$(this).children().addClass('task-bg-color');
}
$('ul#tasks').listview('refresh');
});
HTML:
<div data-role="page" class="type-home">
<div data-role="content">
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="f" id="tasks">
<li data-role="list-divider">Tasks (Background actions)</li>
<li id="clickAndHold">Click & Hold</li>
<li id="clickAndStick">Click & Stick</li>
<li id="clickAndToggle">Click & Toggle</li>
</ul>
</div>
</div>
This might seem like an odd request but I'd like to use jQuery's Selectable tool to only select one item at a time and I'd like it to show me a value I'll have within each tag. At the very least I want the contents of that selection. Has anyone tried to do this? For some reason these little things seem to not be all that easily findable in their API for it.
If you only want one selection at a time, then why use selectable?
I would think you would just use jQuery, as it should be very easy. Or am I missing your point?
Live Example: http://jsfiddle.net/F7fsx/
HTML
<div id='container'>
<div id='one'>one</div>
<div id='two'>two</div>
<div id='three'>three</div>
</div>
CSS
#container div {
width: 50px;
height: 50px;
border: 2px dashed red;
margin: 10px;
color: white;
background:orange;
}
jQuery
$('#container div').click(function() {
$th = $(this);
$th.css('backgroundColor','yellow');
var value = $th.text()
alert(value);
});
A post from the jQuery Forum offers the following code to limit selection to a single item:
$("li").live("click", function(event) {
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
});
As far as extracting data, here is the code that the jQuery UI team uses in the Serialize Demo, to extract data from each selected element:
$("#selectable").selectable({
stop: function(){
var result = $("#select-result").empty();
$(".ui-selected", this).each(function(){
var index = $("#selectable li").index(this);
result.append(" #" + (index + 1));
});
}
});
And the HTML markup is:
<ol id="selectable">
<li class="ui-widget-content">Item 1</li>
<li class="ui-widget-content">Item 2</li>
<li class="ui-widget-content">Item 3</li>
<li class="ui-widget-content">Item 4</li>
<li class="ui-widget-content">Item 5</li>
<li class="ui-widget-content">Item 6</li>
</ol>