So for example i have two links:
<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>
I want it so that when I click Link 1, Link 1 changes to color blue to represent selected, Link 2 stays black. When the user clicks Link 2, then Link 2 changes color to blue and Link 1 changes color back to white.
I currently have a default CSS property for links:
a:link {
color: #green;
}
I am unsure of the best way to handle the "doColorChange()" function. Is it best to create two CSS classes for the two colors, then have doColorChange switch them? Or is it better to give the two links an id and somehow set color properties there? How do I accomplish this?
JQUERY:
$(function() {
var links = $('a.link').click(function() {
links.removeClass('active');
$(this).addClass('active');
});
});
HTML MARKUP:
Link 1
Link 2
I suggest adding a class to the links, that way it's easier.
CSS:
a.link.active { color:blue; }
Added a Live Version (fiddle): http://jsfiddle.net/gHb9F/
HTML
Link 1
Link 2
Script (using jQuery)
$(document).ready(function(){
$('a').click(function(){
$('a').css('color', 'black');
$(this).css('color', 'blue');
});
});
CSS
a:link { color: black; }
a:visited { color: black; }
Fiddle here
Note: The color change will be applied to all anchors current on your page. If you want to limit it to a select few, then put them in a class and add that class to the selector.
Edit:
If you plan on doing anything other than simple color swap, then classes are definitely the way to go (just substitute the .css calls for .addClass and .removeClass with your custom class names.
Try this code. I found it simple to use.
<script type="text/javascript">
var currentLink = null;
function changeLinkColor(link){
if(currentLink!=null){
currentLink.style.color = link.style.color; //You may put any color you want
}
link.style.color = 'blue';
currentLink = link;
}
</script>
<a onClick="changeLinkColor(this)">Link 1</a>
<a onClick="changeLinkColor(this)">Link 2</a>
var doColorChange=function(){ this.style.color="blue";}
Your default CSS colour for links should be:
a:link {
color: #0f0; /* or
color: green;
color: rgb(0,255,0);
}
Otherwise, using jQuery, you can achieve this with:
$('a').click(
function(){
$('.selectedLink').removeClass('selectedLink');
$(this).addClass('selectedLink');
return false
});
Coupled with the CSS:
.selectedLink {
color: #00f;
}
JS Fiddle demo.
Make 2 different classes in css and then swap classes on the links when you click on your link.
CSS
a.link{
color : green;
}
a.selected{
color : black;
}
Javascript
jQuery(a).click(function()
{
jQuery('a.selected').addClass('link');
jQuery('a.selected').removeClass('selected');
jQuery(this).removeClass('link');
jQuery(this).addClass('selected');
});
giving the elements css classes would be a better option. You could do it by using the className property on the object. in doCOlorChange you could write this.className ="newclassName";
Related
Hello please why if I hover on<li> from <ul class='menu controls'> change background but not change color. I know that .controls a have color and it is more than class color for li but if I want addClass for <a> dont work it if i change var li = $(".controls").find('li'); to var li = $(".controls").find('a'); so this dont work why ?
https://codepen.io/Lukinezko/pen/qBOJEad
Add this to your css:
.selected a {
color: white;
}
By the way, you can do this completely with css without js! with just 2-3 lines of css codes..
When I click on it changes background. It works fine. But what if I want to click on it again to restore the original background? I have this code:
jQuery(document).ready(function($) {
$(".select").on("click", function () {
$(this).css("background-image", "url(images/selected.png)");
});
});
Here is jsfiddle EXAMPLE
Basically when I click on the div it changes the background, which is fine. But I want to have ability to click on it again to restore the original background.
It will be an alternative solution for tick box, but just for demo purposes.
Thanks
JS
replace
$(this).css("background-image", "url(images/selected.png)");
with
$(this).toggleClass("active");
Style
#multiselect .active {
background-image: url('...');
}
Fiddle http://jsfiddle.net/09xgrhxo/4/
Instead of using .css() to change the background-image I would add a class in your CSS and use .toggleClass().
Also be aware that simply adding a class will not be specific enough because your css is using:
#multiselect .select
you're going to have to target the class you add as a child of #multiselect:
#multiselect .change
CSS
#multiselect .change{
background-image: url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)
}
JS
$(".select").on("click", function () {
$(this).toggleClass("change");
});
FIDDLE
You could use data-* attribute.
$('.select').attr('data-img', $('.select').css('background-image'));
$(".select").on("click", function() {
$(this).css("background-image", ($(this).css('background-image') == $(this).data('img')) ? "url(http://t2.gstatic.com/images?q=tbn:ANd9GcSZ51HqKXkejWAFcSBrodHd5eUN2QaIJro0jhN1YpmljSdQ5dj2)" : $(this).data('img'));
});
#multiselect .select {
background: url(http://t0.gstatic.com/images?q=tbn:ANd9GcQF_ErOlc78eOGZaEWb-dwPkrv2uyAoKx0Pbn3-e0tAZoUDSQRCsA) center;
width: 250px;
height: 100px;
margin-bottom: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="multiselect">
<div class="select">Option1</div>
<div class="select">Option2</div>
<div class="select">Option3</div>
</div>
Instead of writing background-img url in javascrpt, I would suggest to create two classes having same properties but different background-img url which you want to toggle. so here we will be toggling class (ultimately background-img) in javascript.
see jsfiddle [example][1]
[1]: http://jsfiddle.net/09xgrhxo/13/
I have an about section, where I've split it up into multiple sections loaded by JavaScript for easier reading. I'd like the side navigation for this to have a different background color if it is both hovered over and if it is the one selected, and ALSO to have a border right with a unique color for each option. I have it working with no problems, but I'm just wondering if there is a more efficient way to do this than the way I currently am.
In a nutshell, the HTML:
<nav>
<p id="bout" onclick="bout()">About Us</p>
<p id="mish" onclick="mish()">Our Mission</p>
<p id="team" onclick="team()">The Team</p>
<p id="how" onclick="how()">How It Works</p>
<p id="poli" onclick="poli()">Policies</p>
</nav>
<div class="actual">
<div id="about">
<h2>About Us</h2>
<p>We are a conglomerate of hoodlums.</p>
</div>
</div><!-- end actual -->
And the JS:
function bout() {
document.getElementById("about").innerHTML= '<h2>About Us</h2><p>We are a conglomerate of hoodlums.</p>';
document.getElementById("bout").style.borderRight='3px solid red';
document.getElementById("mish").style.borderRight='none';
document.getElementById("team").style.borderRight='none';
document.getElementById("how").style.borderRight='none';
document.getElementById("poli").style.borderRight='none';
document.getElementById("bout").style.backgroundColor='ghostwhite';
document.getElementById("mish").style.backgroundColor='bisque';
document.getElementById("team").style.backgroundColor='bisque';
document.getElementById("how").style.backgroundColor='bisque';
document.getElementById("poli").style.backgroundColor='bisque';
}
function mish() {
document.getElementById("about").innerHTML = '<h2>Mission</h2><p>Our mission is to rid the world of dust bunnies.</p>';
document.getElementById("bout").style.borderRight='none';
document.getElementById("mish").style.borderRight='3px solid orange';
document.getElementById("team").style.borderRight='none';
document.getElementById("how").style.borderRight='none';
document.getElementById("poli").style.borderRight='none';
document.getElementById("bout").style.backgroundColor='bisque';
document.getElementById("mish").style.backgroundColor='ghostwhite';
document.getElementById("team").style.backgroundColor='bisque';
document.getElementById("how").style.backgroundColor='bisque';
document.getElementById("poli").style.backgroundColor='bisque';
}
As you can see, it's quite cumbersome to have to explicitly turn off an on each style when clicked. The main key though is to have each border-right be a different color.
Here is a jsfiddle with the whole thing, but for some reason it's not actually acknowledging the JS: http://jsfiddle.net/4CrhD/
Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?
The best way would be to use CSS. Add remove a class on a parent element and have the CSS apply the right rules.
body.mish #bout{
border-right : 3px solid red,
}
body.bout #bout{
border-right : 3px solid blue,
}
Yes. You need to divide between html and styling. Use CSS!
Then you can change styles e.g. with jQuery.css():
$('#mish').css({
'border-right': '3px solid orange',
'background-color':'ghostwhite'
});
Of course you can define styles in a class. A class describes the styling definition for all elements using a class.
nav > p {
border-right: none;
background-color: bisque;
}
.active {
border-right: 3px solid red;
background-color: ghostwhite;
}
If a button is clicked you can dynamically add and remove a classes with:
$('nav > p').click(function() {
$('nav > p').removeClass('active');
$(this).addClass('active')
});
Because code duplication is bad (and I don't like to set the full innerHTML), you can create a dynamic page like:
pages = {
'bout': {
'id': 'about',
'headline': 'About Us',
'body': 'We are a conglomerate of hoodlums.'
}
}
Extend the above code to
$('nav > p').click(function() {
$('nav > p').removeClass('active');
$(this).addClass('active')
if (pages[$(this).attr('id')]) {
var page = pages[$(this).attr('id')];
$('.actual').first().empty();
var container = $('<div>', { 'id': page.id });
container.append($('<h2>', { 'html': page.headline }));
container.append($('<p>', { 'html': page.body }));
$('.actual').first().append(container);
}
});
Have look at this jsfiddle for a working example
Addressing your "random" question
Additional random question: Is it possible to link to this page with a different piece of content loaded than about, for example, can I link to this page with "mish()" loaded instead of whats in the HTML?
If you want to have links pointing to this page you can parse the window.location.hash object and link with links like page.html#mish.
To set default a "page" we extend our pages object to provide such a information: http://jsfiddle.net/Eu36g/6/
Define your classes in the CSS : bout, mish, about, poli ... For each one put the CSS you want. After that, in the javascript, you just have to change the class of the element (add class or change class, or whatever) and the new CSS will apply
example
document.getElementById("bout").className = "otherclass"
I have a link called "Navigation" I want the link colour to change as I click on it and stay changed. For example: Default colour is blue. When I click on the link it goes to another tab and the color turns to green and it should remain green.
here is the code so far:
<style type="text/css">
a.specialAnchor
{
font-size: 1em;
text-align: right;
padding: 10px;
padding-right: 15px;
color: #0066FF;
}
a.specialAnchor:link
{
color: #0066FF;
}
a.specialAnchor:visited
{
color: Green;
}
a.specialAnchor:hover
{
color:Orange;
text-decoration:underline;
}
a.specialAnchor:active
{
color: Green;
text-decoration:underline;
}
<asp:LinkButton ID="Navigation" runat="server" BorderStyle="None" CssClass ="specialAnchor"
PostBackUrl="~/navigation.aspx">Navigation</asp:LinkButton>
This does not give me the results I want Please help.
Basically my webpage looks a something like this:
there are four tabs: A, Navigation, C, D
And in all those four tabs there are links at the bottom of the page.
When you are on A and you click on Navigation link, it will take you to Navigation page. What I want is to change the colour of the link when it is clicked on or visited.
Thank you
Have you tried changing the color of the visited pseudo class to green? Try that and see if works the way you want?
Ok, given that you have a link like this
<a class="spec" href="wherever">Link</a>
You need styles like this
<style type="text/css">
.spec:link {color:#FF0000;} /* unvisited link */
.spec:visited {color:#00FF00;} /* visited link */
.spec:hover {color:#FF00FF;} /* mouse over link */
.spec:active {color:#0000FF;} /* selected link */
</style>
Done on the tryit editor at w3schools :)
If changing your :visited pseudoclass doesn't give you what you want, try changing the style onclick with jQuery:
$('a.specialAnchor').click(function() {
this.style.color = 'green';
}
Try something like this
$(document).ready(function () {
$('.changecolor').click(function () {
$(this).css("color", "red");
});
});
<a class="changecolor">Click To Change</a>
If you need to change the color back to what it was, you can use .toggle()
This is the simple HTML code:
<li class="main">
ImageLink <!--1st anchor tag-->
ImageName <!--2nd anchor tag-->
</li>
Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)
Not with css. This kind of actions can only be done by script.
If you use jQuery you could add the following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
var a1 = $('a:first');
var a2 = $('a:second');
a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });
});
</script>
Now you can use the hover class to specify the color:
.hover { color: red; }
Edit
It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.
With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:
a:hover + a {
color: red;
}
JSFiddle preview: http://jsfiddle.net/9Ezt5/
See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html
Yes you can do it with pure css.
for example:
a:hover + a{
background:red;
}
Check this for more
http://jsfiddle.net/Bw5by/
In Jquery you can do it like this,
$("#first").hover(function(){
$('#second').css('color','red')
},function(){
$('#second').css('color','blue')
});
See it in action here,
http://jsfiddle.net/gagan/NYAHY/1/
If those are the only two links in the list item tag, then you could do something like this:
li.main:hover a
{
color: red;
}
li.main a:hover
{
color: blue;
}
Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.