Change CSS Link Property onClick with Javascript/J

问题:

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?

回答1:

JQUERY:

$(function() {
   var links = $('a.link').click(function() {
       links.removeClass('active');
       $(this).addClass('active');
   });
});

HTML MARKUP:

<a href="#" class="link">Link 1</a>
<a href="#" class="link">Link 2</a>

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/

回答2:

HTML

<a href="#">Link 1</a>
<a href="#">Link 2</a>

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.

回答3:

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>

回答4:

var doColorChange=function(){ this.style.color="blue";}

回答5:

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.

回答6:

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');

});

回答7:

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";