We Keep Coding

How to keep the active link lit when clicking on the page?

I have a set of buttons on my page, each of which calls a javascript function when clicked; when clicked, the active link color is lit, but when I click elsewhere on the page the active link color is cleared. I want it to stay lit unless I click on another button link.
Here is an example of how a link is constructed (there are 10 links):
<div class="C1"><br><button class="button_01" onclick="HideDropdown(); ShowPage(7);">FAQs</button></div>
Here's the css for the button and C1 classes:
.button_01 {
background-color: rgb(0,2,3);
border: none;
color: rgb(100,100,100);
font-family: camphorW01-Thin,calibri,arial;
text-align: left;
text-decoration: none;
font-size: 13pt;
cursor: pointer;
transition: all 150ms ease-in;
}
.button_01:hover { color: rgb(175,222,162); }
.button_01:active { color: rgb(175,222,162); }
.button_01:focus { color: rgb(175,222,162); }
.button_01:visited { color: rgb(175,222,162); }
.C1{
color:#DBDBDB;
font-family: sans-serif;
font-size: 14pt;
text-indent: 0px;
width: auto;
margin: auto;
}
I know the default behavior is for the active link color to clear when clicking elsewhere, but I should be able to use javascript or jquery to get the value of the active link and keep it the same color (unless I click on another link); I've found only two posts that come close but one is specific to list items (li), not a button class with an onclick handler (not an anchor tag) at How to get the ID of an active link. Another post at how to Keep the color of active link constant, until i press other link showed a jquery function specific to anchor tags; I modified it like this:
<script>
var items = $("button_01");
items.removeClass("active");
$(this).toggleClass("active");
});
<script>
That doesn't work and with that script in place the links do not work.
So my question is: how do I keep the active link color lit on a button that has an onclick handler to call javascript (versus a list item or an anchor tag)?
Thanks very much for any help on this.
EDIT: I solved this problem and posted the answer below.

assuming all you buttons have class="button_01"
$('.button_01').on('click', function(){
$('.button_01').removeClass('active');
$(this).addClass('active');
});
.active {
background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button_01">Button 1</button>
<button class="button_01">Button 2</button>
<button class="button_01">Button 3</button>

you could use the .css() property within jquery if the active attribute is still clicking out on your site.
$('.button_class').on('click', function() {
$('.button_class').removeAttr('style');
$(this).css('backgroundColor', 'red');
});

I just made a quick fiddle with what I think is a possible solution to your problem. I've done in pureJs.
function ShowPage(e,page){
// do a function to reset colors to default
resetColors();
// call hide here, since you do it everytime you show a page
HideDropdown();
e.classList.add("active");
//do stuff here
}
function HideDropdown(){
// do stuff here
}
function resetColors(){
// do stuff here
}
.active{
color: red !important;
}
<div class="C1">
<button class="wathever" onclick="ShowPage(this,7);">A</button>
<button class="wathever" onclick="ShowPage(this,7);">B</button>
<button class="wathever" onclick="ShowPage(this,7);">C</button>
<button class="wathever" onclick="ShowPage(this,7);">D</button>
</div>

After much research and work, here's how I solved this problem.
Remember that I have 10 links, each with a unique ID number, so I loop through them 1-10 and create the ID name (e.g., btn04). In order to keep the current active link lit, I have to change the link color to the active link color when I click anywhere on the page except for another link of the same type (button_01 class). For that, I need to store the active element in a global var on each button click, so that on any subsequent click we know what the last active element was BUT the subsequent click will change the active element to the currently-clicked element. What to do? I set up another global var, LastActiveElement, which captures the most recently set active element. Now I know where the last click was -- if it was a hyperlink and the current click is not a hyperlink, I change the last clicked hyperlink color back to its active color, which has the effect of keeping it on the same color.
Add this to the body tag:
<body onload="ShowABC(1);" onclick="changeColor(event); getLastGAE(event); getFocusElement(event);">
<script>
function changeColor(event) {
for (i = 1; i < 11; i++) {
ID_Name = "btn0" + i.toString();
if (i >= 10){ID_Name = "btn" + i.toString();}
var elem = document.getElementById(ID_Name);
TargetClass = event.target.getAttribute('class');
TargetID = event.target.getAttribute('id');
var active = document.activeElement;
var equal = (LastActiveElement == ID_Name);
tfh = TargetID == "hamburger_container";
if ((equal == "true") && (TargetClass != "button_01") && (tfh == "false")){
var newColor = "rgb(175,222,162)";
elem.style.color = newColor; }
if (TargetClass == "button_01"){ elem.style.color = "rgb(100,100,100)"; }
if (TargetID == ID_Name){ elem.style.color = "rgb(175,222,162)"; }
}
}
</script>
<script>
var LastActiveElement;
function getLastGAE(event) {
LastActiveElement = GlobalActiveElement;
}
</script>
<script>
var GlobalActiveElement;
function getFocusElement(event) {
var active = document.activeElement;
TargetID = event.target.getAttribute('id');
GlobalActiveElement = TargetID;
}
</script>
With that, if I click anywhere on the page except another hyperlink of the same class, the active link color does not change.
Now I know some advise against global vars, but this is only two data elements added to the DOM so it takes up negligible space.
Of course, there may be other solutions but this is what I came up with.
Thanks to everyone who replied to this question.

How to change CSS pseudo-class element using JavaScript

I want to change this image using javascript:
dance:active { background-image: url("myImage.png") }
You can use
document.getElementById(element).style.backgroundImage = url(image);
to change
#element {background-image: url(image)}
I would like to change the image of when the element is active using javascript. Thanks!

I figured it out!
You can have multiple classes in your CSS :
element.dance1 { stuff }
element.dance1:active { active stuff }
element.dance2 { stuff 2 }
element.dance2:active { active stuff 2 }
and then change the class of the element in javascript:
document.getElementById(element).className = dance1/dance2

You can try using jQuery to achive what you want. dance: active is CSS Pseudo-classes. Learn more about Pseudo-class.
The demo change the div color when mouse down and switch the color back when mouse up. Leave comments if this is not what you want.
$("#dance").on("mousedown", function () {
$("#dance").css("background", "blue");
}).on("mouseup", function(){
$("#dance").css("background", "black");
});
https://jsfiddle.net/x_li/5nkvms8q/
and jQuery can also do the following
$('#damce:checked').val();

CSS get parent elements attribute

So i just ran into this problem. Let's say I have the following markup:
<article data-color='#123456'>
<header>...</header>
<a href='#'>Lorem ipsum</a>...
...
</article>
So I have an element with a custom color attribute. I want to have the header have it as a background color, and the link as a color (the color is either randomly generated or user-defined). Is there a way to do this is CSS alone? (I am aware that jQuery would do this without a problem, but I'd like to kepp things as pretty as possible, not using Javascript for styling alone.)

You can use an attribute selector in your CSS:
article[data-color="#123456"] header {
background-color: "#123456";
}
article[data-color="#123456"] a {
color: "#123456";
}
However, this assumes you can enumerate the data-color attributes in your CSS. If it's generated dynamically and can take any value, you can't do it in CSS -- it doesn't have variables or back-references.

Unfortunately CSS cannot do this. the JS is relatively simple though:
$('article').filter(function() {
return $(this).data('color');
}).each(function() {
var $el = $(this), color = $el.data('color');
$el
.find('header').css('background-color', color).end()
.find('a').css('color', color);
});
Example fiddle

I think you can do it like this:
article[data-color="#123456"] header {
background-color: attr(data-color color);
}
article[data-color="#123456"] a {
color: attr(data-color color);
}
UPDATE
The first answer is incorrect, it doesn't work.
Do this rather:
article[data-color="#123456"] header {
background-color: "#123456";
}
article[data-color="#123456"] a {
color: "#123456";
}

How to show button on div mouse hover

i want to show button on div hover.
when i hover mouse on div then button show otherwise hide.
my button in divbutton div.
html
<div class="divbutton">
<button type="button" style="display: none;">Hello</button>
</div>
when I hover mouse on div it should show but how to do that i do not know.
when I remove mouse button again hide.
Thank you.

Use the below selector
button {
display: none; /* Hide button */
}
.divbutton:hover button {
display: block; /* On :hover of div show button */
}
Demo
Also make sure you assign some height or min-height to your div element, else it will be 0 as it doesn't hold any content. Also, don't use display: none; as inline style, as inline styles have highest specificity, and hence, you will be forced to use !important which is bad.
In the above example am using button {/*Styles*/} but that is a general element selector, so make sure you define a class to your button element.

Use following jQuery to perform your task.
Here is a jsfiddle demo
$(document).ready(function () {
$(document).on('mouseenter', '.divbutton', function () {
$(this).find(":button").show();
}).on('mouseleave', '.divbutton', function () {
$(this).find(":button").hide();
});
});

Mr. Alien's answer gives a nice CSS implementation. If you need in jquery, use this -
$( ".divbutton" )
.on("mouseenter", function() {
$("button").show();
})
.on("mouseleave", function() {
$("button").hide();
});
In pure JavaScript -
var buttonDiv = document.getElementsByClassName("divbutton")[0]; //better use some id and then use getElementById
buttonDiv.onmouseover = function() {
document.getElementById("YourButtonId").style.display = 'block';
}
buttonDiv.onmouseout = function() {
document.getElementById("YourButtonId").style.display = 'none';
}

Try this:
$('.divbutton').mouseover(function(event)
{
$(this).find('button').show();
});
$('.divbutton').mouseout(function(event)
{
$(this).find('button').hide();
});

first hide the button with transform property.
button{
transform:translate(100%,100%)
//this will move the button right and buttom
}
then when you hover on div, you bring it back
.divbutton:hover button{
//class name should have been divButton
transform:translate(0,0)}

Trying to make menu items pink when viewing their div

I have a list of links that make divs slide in above them, which I made using a script I found here: http://flesler.blogspot.ca/2007/10/jqueryscrollto.html.
I want the link to change color when they are clicked, so that the user can clearly see where they are. I would like to do something like:
<li>Promo Package</li>
Except that changes the color back to its original color when another link is clicked. Also of course external would be better.

I'd use a click listener on the list:
$('ul').on('click', 'a', function() {
$('ul a').css('color', '#000000'); // set all links to black;
$(this).css('color', '#00FF00'); // set curent link to green;
return false;
});

Why don't you use a CSS style instead ?
if you have jQuery :
<li>Promo Package</li>
jQuery(document).ready(function(){
jQuery('.link_black').click(function(){
jQuery(".link_green").removeClass('link_green');
jQuery(this).addClass('link_green');
});
});
<style>
.link_black{
color : black;
}
a.link_black{
color : green;
}
</style>
if you do not use jQuery :
<li>Promo Package</li>
<script>
function clickedGreenLink(obj){
if (window.currentGreenLink!=undefined){
window.currentGreenLink.class=window.currentGreenLink.class.replace('link_green','');
}
window.currentGreenLink=obj;
window.currentGreenLink.class+='link_green';
}
</script>
That should work