fakt7
April 13, 2014, 6:18pm
1
Good day. I want to change the current color of a link (opened link). I tried two ways how to do it.
First way
a:link {
color:black;
}
a:visited {
color:gray;
}
a:hover {
color:blue;
}
a:active {
color:purple;
}
It change color of all links to defined in a:visited . Hover and active work correct. I need change current link color and to remain this color while link is opened.
Second way
<div id="link1">
some content
</div>
<div id="link2">
some content
</div>
<div class="div1">
<div id="navigation">
<ul>
<li><a data-tab="#link1" id="link-link1"href="#link1">Link1</a></li>
<li><a data-tab="#link2" id="link-link2"href="#link2">Link2</a></li>
</ul>
</div>
</div>
CSS code to change current link color:
#link1:target ~ .div1 #navigation #link-link1,
#link2:target ~ .div1 #navigation #link-link2
{
background: #000;
color: #fff;
}
This works but i need to define links before
<div id="link1">
some content
</div>
<div id="link2">
some content
</div>
And after it does not change the current color of the link. I tried
.div1 #navigation #link-link1 ~ #link1:target and .div1 #navigation #link-link1 #link1:target.
Problem: there isn’t a previous sibling selector .
ralphm
April 13, 2014, 9:36pm
2
You might be use this example for more ideas,
a:active : when you click on the link and hold it
a:visited : when the link has already been visited
If you want to the link of current page to be highlighted, you can define particular style to the link,
.currentLink {
color: #640200;
background-color: #000000;
}
fakt7
April 17, 2014, 5:32pm
4
If you think:
.link1 {
color: #640200;
background-color: #000000;
}
.link2 {
color: #640200;
background-color: #000000;
}
It is not working. I tried this code:
CSS
a {color: #fff; font-size: 19px; padding-right:25px;
}
a:link {color: #fff;
}
a:visited {
}
a:hover { color: #000;
}
a:active { color: #000;
}
.active {color:#000;}
JS
$(document).ready(function(){
$("a.nav1").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
});
});
Link example
<li><a class=“nav1” data-tab=“#home ” id=“link-home"href=”#home ">Home</a></li>
This work but
padding-right:25px;
reorganize my slideshow. I need to use it with #navigation
#navigation a {color: #fff; font-size: 19px; padding-right:25px;
}
#navigation a:link {color: #fff;
}
#navigation a:visited {
}
#navigation a:hover { color: #000;
}
#navigation a:active { color: #000;
}
.active {color:#000;}
But when i use #navigation JS script do not change color opened link to black. If i miss out
#navigation a
and use only
#navigation a link, ...
default color of links is violet (no color defined in #navigation a:link ).