Develop Reference

Share buttons on hover

I've been trying to make the share buttons to appear when hovering on an article "Mashable style" but I can't seem to get it right. Any help will be appreciated.
<div class="c-container">
<article class="c-news">
<header>
<a href="#">
<img src="http://a_really_long_url.jpg"
alt="post-image" class="post-image">
</a>
</header>
look at jsFiddle

You need to use the :hover CSS selector:
First hide the elements:
.st_facebook_hcount, .st_twitter_hcount {
position:relative;
display:none; /* Hide It*/
width:6rem;
top: -1.2rem;
left:18rem;
}
Then set the :hover to show:
.c-news:hover .st_facebook_hcount, .c-news:hover .st_twitter_hcount {
display:inline-block;
}
The demo http://jsfiddle.net/nJRtm/6/

how to prevent css div popup from jumping back to the top of the page

I'm by no means well versed in JS, but I'm trying to put together a simple portfolio site for school with a black transparent div to act as a lightbox. I'm using CSS and JS to toggle this div, but on a long scrolling page, it jumps to the top when turned on. Here's my CSS:
<style type="text/css">
div.transbox{
width:100%;
height:100%;
margin:0px 0px;
position:fixed;
background-color:#000000;
background:rgba(0,0,0,0.75);
z-index:99;
}
p.ptransbox{
width:400px;
padding:5px;
position:relative;
background:rgba(255,255,255,0.5);
color:#000;
border-radius:5px;
}
img.itransbox{
padding:10px;
position:relative;
background:rgba(255,255,255,0.5);
border-radius:5px;
}
Here is the JS:
var toggle2 = function() {
var mydiv = document.getElementById('02');
if (mydiv.style.display === 'none' || mydiv.style.display === '')
mydiv.style.display = 'block';
else
mydiv.style.display = 'none'
}
This is the code that is immediately viewable as the link to open the div (toggle on):
<td style="float:left; width: 33%" class="school">
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2();" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">
<img src="images/thumbs/chair.png" id="Image2" /></a>
And this is the code that brings the "lightbox" up, with the option to toggle it off:
<a href="#" onclick="toggle2();">
<div align="center" id="02" class="transbox" style="display: none;">
<p><img class="itransbox" src="images/anti-thumbs/chair.jpg" /></p>
<p class="ptransbox"><strong>Wörner Hall</strong>, 2010</p></div></a>
Please disregard all the Titles, Alts, or anything that is just specific to the content. You can see my portfolio in action here: http://www.student.nvcc.edu/home/majeffers3/ and if you notice, when you scroll to the bottom and click on an item, it jumps you to the top. I've been a long time lurker, first time I've ever posted a question because I can't seem to find the solution. Thank you so much for all your help!

You need to prevent the default action from taking place when the link is clicked. The simplest way to do this is to return false from the onclick handler:
<a title="Girl in Chair, 2012" class="tooltip" href="#" onclick="toggle2(); return false;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/thumbs/chairO.png',1)">

Please change from href="#" to href="javascript:;". It simply go to "#" link when you click.

Make sure you return false from your onclick handlers. If you don't, the default action for hyperlinks kicks in, which means you'll navigate to #, which means the top of the current page.

Dropdown select with images

I wanted to create a dropdown select which has images instead of text as the options. I've done some Googling and searching here on Stack Overflow, and the answer generally given is to use the jQuery combobox.
The problem with this solution, it seems to me, is that you have to provide text. It looks like the images are just icons that accompany that text on the left. Correct me if I'm wrong, but this solution wouldn't cover what I'm trying to do-- which is completely replace the text with images.
Some background on what I'm trying to do-- I'm trying to create a dropdown for users to select line thickness on an online painting/doodling app. The images would be lines of different thickness, kind of like mspaint.

You don't even need javascript to do this!
I hope this got you intrigued so here it goes. First, the html structure:
<div id="image-dropdown">
<input type="radio" id="line1" name="line-style" value="1" checked="checked" />
<label for="line1"></label>
<input type="radio" id="line2" name="line-style" value="2" />
<label for="line2"></label>
...
</div>
Whaaat? Radio buttons? Correct. We'll style them to look like a dropdown list with images, because that's what you're after! The trick is in knowing that when labels are correctly linked to inputs (that "for" attribute and target element id), the input will implicitly become active; click on a label = click on a radio button. Here comes comes slightly abbreviated css with comments inline:
#image-dropdown {
/*style the "box" in its minimzed state*/
border:1px solid black; width:200px; height:50px; overflow:hidden;
/*animate the dropdown collapsing*/
transition: height 0.1s;
}
#image-dropdown:hover {
/*when expanded, the dropdown will get native means of scrolling*/
height:200px; overflow-y:scroll;
/*animate the dropdown expanding*/
transition: height 0.5s;
}
#image-dropdown input {
/*hide the nasty default radio buttons!*/
position:absolute;top:0;left:0;opacity:0;
}
#image-dropdown label {
/*style the labels to look like dropdown options*/
display:none; margin:2px; height:46px; opacity:0.2;
background:url("http://www.google.com/images/srpr/logo3w.png") 50% 50%;}
#image-dropdown:hover label{
/*this is how labels render in the "expanded" state.
we want to see only the selected radio button in the collapsed menu,
and all of them when expanded*/
display:block;
}
#image-dropdown input:checked + label {
/*tricky! labels immediately following a checked radio button
(with our markup they are semantically related) should be fully opaque
and visible even in the collapsed menu*/
opacity:1 !important; display:block;
}
Full example here: http://jsfiddle.net/NDCSR/1/
NB1: you'll probably need to use it with position:absolute inside a container with position:relative +high z-index.
NB2: when adding more backgrounds for individual line styles, consider having the selectors based on the "for" attribute of the label like so:
label[for=linestyle2] {background-image:url(...);}

Check this example .. everything has been done easily http://jsfiddle.net/GHzfD/
EDIT: Updated/working as of 2013, July 02: jsfiddle.net/GHzfD/357
#webmenu{
width:340px;
}
<select name="webmenu" id="webmenu">
<option value="calendar" title="http://www.abe.co.nz/edit/image_cache/Hamach_300x60c0.JPG"></option>
<option value="shopping_cart" title="http://www.nationaldirectory.com.au/sites/itchnomore/thumbs/screenshot2013-01-23at12.05.50pm_300_60.png"></option>
<option value="cd" title="http://www.mitenterpriseforum.co.uk/wp-content/uploads/2013/01/MIT_EF_logo_300x60.jpg"></option>
<option value="email" selected="selected" title="http://annualreport.tacomaartmuseum.org/sites/default/files/L_AnnualReport_300x60.png"></option>
<option value="faq" title="http://fleetfootmarketing.com/wp-content/uploads/2013/01/Wichita-Apartment-Video-Tours-CTA60-300x50.png"></option>
<option value="games" title="http://krishnapatrika.com/images/300x50/pellipandiri300-50.gif"></option>
</select>
$("body select").msDropDown();

Seems like a straightforward html menu would be simpler. Use html5 data attributes for values or whatever method you want to store them and css to handle images as backgrounds or put them in the html itself.
Edit: If you are forced to convert from an existing select that you can't get rid of, there are some good plugins as well to modify a select to html. Wijmo and Chosen are a couple that come to mind

If you think about it the concept behind a dropdown select it's pretty simple. For what you're trying to accomplish, a simple <ul> will do.
<ul id="menu">
<li>
<img src="" alt=""/> <!-- Selected -->
<ul>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
<li><img src="" alt=""/></li>
</ul>
</li>
</ul>
You style it with css and then some simple jQuery will do. I haven't tried this tho:
$('#menu ul li').click(function(){
var $a = $(this).find('a');
$(this).parents('#menu').children('li a').replaceWith($a).
});

PLAIN JAVASCRIPT:
DEMO: http://codepen.io/tazotodua/pen/orhdp
var shownnn = "yes";
var dropd = document.getElementById("image-dropdown");
function showww() {
dropd.style.height = "auto";
dropd.style.overflow = "y-scroll";
}
function hideee() {
dropd.style.height = "30px";
dropd.style.overflow = "hidden";
}
//dropd.addEventListener('mouseover', showOrHide, false);
//dropd.addEventListener('click',showOrHide , false);
function myfuunc(imgParent) {
hideee();
var mainDIVV = document.getElementById("image-dropdown");
imgParent.parentNode.removeChild(imgParent);
mainDIVV.insertBefore(imgParent, mainDIVV.childNodes[0]);
}
#image-dropdown {
display: inline-block;
border: 1px solid;
}
#image-dropdown {
height: 30px;
overflow: hidden;
}
/*#image-dropdown:hover {} */
#image-dropdown .img_holder {
cursor: pointer;
}
#image-dropdown img.flagimgs {
height: 30px;
}
#image-dropdown span.iTEXT {
position: relative;
top: -8px;
}
<!-- not tested in mobiles -->
<div id="image-dropdown" onmouseleave="hideee();">
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs first" src="http://www.google.com/tv/images/socialyoutube.png" /> <span class="iTEXT">First</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/fiabee.png" /> <span class="iTEXT">Second</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/tv/images/lplay.png" /> <span class="iTEXT">Third</span>
</div>
<div class="img_holder" onclick="myfuunc(this);" onmouseover="showww();">
<img class="flagimgs second" src="http://www.google.com/cloudprint/learn/images/icons/cloudprintlite.png" /> <span class="iTEXT">Fourth</span>
</div>
</div>

This is using ms-Dropdown : https://github.com/marghoobsuleman/ms-Dropdown
But data resource is json.
Example : http://jsfiddle.net/tcibikci/w3rdhj4s/6
HTML
<div id="byjson"></div>
Script
<script>
var jsonData = [
{description:'Choos your payment gateway', value:'', text:'Payment Gateway'},
{image:'https://via.placeholder.com/50', description:'My life. My card...', value:'amex', text:'Amex'},
{image:'https://via.placeholder.com/50', description:'It pays to Discover...', value:'Discover', text:'Discover'},
{image:'https://via.placeholder.com/50', title:'For everything else...', description:'For everything else...', value:'Mastercard', text:'Mastercard'},
{image:'https://via.placeholder.com/50', description:'Sorry not available...', value:'cash', text:'Cash on devlivery', disabled:true},
{image:'https://via.placeholder.com/50', description:'All you need...', value:'Visa', text:'Visa'},
{image:'https://via.placeholder.com/50', description:'Pay and get paid...', value:'Paypal', text:'Paypal'}
];
$("#byjson").msDropDown({byJson:{data:jsonData, name:'payments2'}}).data("dd");
}
</script>

Use combobox and add the following css .ddTitleText{ display : none; }
No more text, just images.

I am a little to late on this, but you can do this using a simple bootstrap drop down and then do your code on select change event in any language or framework. (This is just a very basic solution, for other people like me who are just starting out and looking for a solution for a small simple project.)
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Select Image
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
<li role="separator" class="divider"></li>
<li> <a style="background-image: url(../Content/Images/Backgrounds/background.png);height:100px;width:300px" class="img-thumbnail" href=""> </a></li>
</ul>
</div>

Years gone and such things is possible to create using pure javascript and css without jquery, here is an example: Selectron23
Example:
let data1 = {
options: [
{
value: 'usd',
title: 'USD',
text: 'United States Dollar',
img: 'https://pluginus.net/wp-content/uploads/2021/03/united_states_of_america.gif'
},
{
value: 'eur',
title: 'EUR',
text: 'European Euro',
img: 'https://pluginus.net/wp-content/uploads/2021/03/european_union.gif'
},
{
value: 'uah',
title: 'UAH',
text: 'Украинская гривна',
img: 'https://pluginus.net/wp-content/uploads/2021/03/ukraine.gif'
},
{
value: 'gbp',
title: 'GBP',
text: 'Great Britain pound',
img: 'https://pluginus.net/wp-content/uploads/2021/03/united_kingdom.gif'
}
],
label: 'Select currency',
selected: 'uah',
width: '100%',
imgpos: 'right',
//name: 'my_value', //hidden input name
fusion: false, //use if wrap to fuse titles by keys with options description here
max_open_height: 200, //max height (px) of opened drop-down when vertical scroll appears
};
var selector1 = new Selectron23(document.querySelector('#block-example'), data1);
Result:

I tried several jquery based custom select with images, but none worked in responsive layouts. Finally i came across Bootstrap-Select. After some modifications i was able to produce this code.
github repo link here

I would like to add more than one gallery using the same jquery

I have little jquery knowledge and I am wondering what I'm doing wrong. I would like to place multiple galleries on a page, but I don't know how to set the codes to load them correctly.

The javascript is just there to "turn on the magic". Put all the html you need on the page, then initialise it with javascript. The easiest way to understand (though not the most efficient) is just to make many copies of the code you have.
fill in the blanks:
<script language="javascript" type="text/javascript">
$(document).ready(
function (){
$("#pikame1").PikaChoose();
$("#pikame2").PikaChoose();
$("#pikame3").PikaChoose();
...
});
</script>
fill in the blanks:
<ul id="pikame1" class ="pikame clearfix">
...
</ul>
<ul id="pikame2" class ="pikame clearfix">
...
</ul>
<ul id="pikame3" class ="pikame clearfix">
...
</ul>
...
exactly like this:
.pikame{
margin-left: 80px;
}
.pika_main{
width:420px;
margin-top: 100px;
}
.pikame li{
margin:5px;
margin-top:20px;
float: left;
border:1px solid #3e3f41;
position:relative;
overflow:hidden;}
/**ADVANCED OPTIONS**/
.pikame li img{position:relative;cursor:pointer;}
.pika_main img{border:2px solid #3e3f41;}
.pika_main{position: relative;margin:0 auto;margin-left:60px; margin-top:32px;}
.pikachoose li{float:left;position:relative;overflow:hidden;list-style:none;}
.pika_play{position:absolute;top:7px;z-index:1;}
.pika_play a{position:relative;margin-left:auto;cursor:pointer;}
.pika_play img{border:none !important;}
.pika_caption{width:100%;height:30px;text-align:center;}
.pika_navigation a{font-size: 12px;color:white;text-decoration: none;}
.pika_navigation a:hover{text-decoration: underline;}
.pika_navigation{padding-top:10px;clear:both;text-align:center;}
Let me know if there are any issues with this, as I have changed the css a bit so as not to be super-redundant, could interfere with existing styles.

you can set it manually by giving each gallery a unique id
$(document).ready(
function (){
$("#pikame1").PikaChoose();
$("#pikame2").PikaChoose();
$("#pikame3").PikaChoose();
...
});
or you can also give all your gallery a common css name then run an each function to process them all at once.
$(document).ready(function (){
$('.pikame').each(function(){
$(this).PikaChoose();
});
});
the only thing is the css selectors in your css part is pertaining to an element having an specific id. you can also create more css like that with different ul id's or you can also
change those selectors to select a class not an id
for example from this:
ul#pikame{
margin-left: 80px;
}
to this:
ul.pikame{
margin-left: 80px;
}
notice the selector $('#pikame1') and $('.pikame'). the first one reffers to an id and the second one to a css.

Change link color of the current page with CSS

How does one style links for the current page differently from others? I would like to swap the colors of the text and background.
HTML:
<ul id="navigation">
<li class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
CSS:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}

With jQuery you could use the .each function to iterate through the links with the following code:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
$("nav [href]").each ...
If you are using URL parameters, it may be necessary to strip these:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.

a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).

It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
There are a couple of restrictions:
If the page wasn't navigated to using one of these links it won't be
coloured;
The ids need to occur at the top of the page otherwise the
page will jump down a bit when visited.
As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.
Other in-page links (bookmarks) will also cause the colour to be lost.

JavaScript will get the job done.
Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.
JavaScript
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forE‌​ach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link'});
CSS
.current-link {
color:#baada7;
}
Other Notes
Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.
In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.

a:link -> It defines the style for unvisited links.
a:hover -> It defines the style for hovered links.
A link is hovered when the mouse moves over it.

include this! on your page where you want to change the colors save as .php
<?php include("includes/navbar.php"); ?>
then add a new file in an includes folder.
includes/navbar.php
<div <?php //Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
echo " class=\"navbargreen\" ";?> >
</div>

N 1.1's answer is correct. In addition, I've written a small JavaScript function to extract the current link from a list, which will save you the trouble of modifying each page to know its current link.
<script type="text/javascript">
function getCurrentLinkFrom(links){
var curPage = document.URL;
curPage = curPage.substr(curPage.lastIndexOf("/")) ;
links.each(function(){
var linkPage = $(this).attr("href");
linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
if (curPage == linkPage){
return $(this);
}
});
};
$(document).ready(function(){
var currentLink = getCurrentLinkFrom($("navbar a"));
currentLink.addClass("current_link") ;
});
</script>

Best and easiest solution:
For each page you want your respective link to change color to until switched, put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don't apply the feature to all accidentally. We'll use white as an example:
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
For all other attributes such as LINK, ACTIVE and HOVER, you can keep those in your style.css. You'll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css"><!--
.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
--></style>
</head>
<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">
<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>
<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">
<span class="class1" id="nav_menu">
<font face="Georgia" color="#0000FF" size="2"><b> Home </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> About </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font>
</span>
</td></tr></table></body></html>
Note: the style goes in between the head tag (<head> .... </head>) and the class="class1" and the id="nav_menu" goes in the ie: (-- <span class="class1" id="nav_menu"> --).
Then the last class attribute (class="current") goes in the hyper-link code of the link in the page that you want the active current link to correspond to.
Example: You want the link tab to stay active or highlighted when it's correspondent page is whats currently in view, go to that page itself and place the class="current" attribute by it's link's html code. Only in the page that corresponds to the link so that when ever that page is at view, the tab will stay highlighted or stand out different from the rest of the tabs.
For the Home page, go to the home page and place the class in it. example: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
For the About page, go to the about page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
For the Contact page, go to the contact page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
etc ......
Notice the example Table above;- Lets assume this was the Home page, so on this page, only the Home url link section has the class="current"
Sorry for any meaning-less error, am not a prof. but this worked for me and displays fine in almost all the browsers tested, including ipad, and smart phones. Hope this will help some-one out here because is very frustrating to want to and not able to. I had tried so had to get to this, and so far it's good for me.

#Presto
Thanks! Yours worked perfectly for me, but I came up with a simpler version to save changing everything around.
Add a <span> tag around the desired link text, specifying class within. (e.g. home tag)
<nav id="top-menu">
<ul>
<li> <span class="currentLink">Home</span> </li>
<li> About </li>
<li> CV </li>
<li> Photos </li>
<li> Archive </li>
<li> Contact</li>
</ul>
</nav>
Then edit your CSS accordingly:
.currentLink {
color:#baada7;
}

You do not need jQuery just to do this! All you need is a tiny and very light vanilla Javascript and a css class (as in all the answers above) :
First define a CSS class in your stylesheet called current.
Second add the following pure JavaScript either in your existing JavaScript file or in a separate js script file (but add script tage link to it in the head of the pages) or event just add it in a script tag just before the closing body tag, it will still work in all these cases.
function highlightCurrent() {
const curPage = document.URL;
const links = document.getElementsByTagName('a');
for (let link of links) {
if (link.href == curPage) {
link.classList.add("current");
}
}
}
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
highlightCurrent()
}
};
The 'href' attribute of current link should be the absolute path as given by document.URL (console.log it to make sure it is the same)

Use single class name something like class="active" and add it only to current page instead of all pages. If you are at Home something like below:
<ul id="navigation">
<li class="active">Home</li>
<li class="">Theatre</li>
<li class="">Programming</li>
</ul>
and your CSS like
li.active{
color: #640200;
}

You can add an id in addition to the class name. Styles referring to the id will override the styles referring to the class. You might call the id: #active and add it to the link of the html page you are currently on:
HTML of href="/" (Home):
<ul id="navigation">
<li id="active "class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
Css:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
#active {
color:#640200;
background-color:#000000;
}

So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS, then here is a simple solution.
I want to change the anchor text colour on my software page to light blue:
<div class="navbar">
<ul>
<li>Home</li>
<li>Useful Sites</li>
<li class="currentpage">Software</li>
<li>The Workbench</li>
<li>Contact</li></a>
</ul>
</div>
And before anyone says that I got the <li> tags and the <a> tags mixed up, this is what makes it work as you are applying the value to the text itself only when you are on that page. Unfortunately, if you are using PHP to input header tags, then this will not work for obvious reasons.
Then I put this in my style.css, with all my pages using the same style sheet:
.currentpage {
color: lightblue;
}