Cambiar CSS Enlace de la Propiedad onClick Javascript/JQuery?

Así, por ejemplo, tengo dos enlaces:

<a onClick="doColorChange()">Link 1</a>
<a onClick="doColorChange()">Link 2</a>

Quiero que cuando hago clic en el Enlace 1, Enlace 1 cambia a color azul para representar seleccionado, Enlace 2 permanece en negro. Cuando el usuario hace clic en el Enlace 2, Enlace 2 cambia de color a azul y Enlace 1 cambia de color a blanco.

Actualmente tengo un CSS predeterminado de la propiedad por los enlaces:

a:link {
   color: #green;
}

Estoy seguro de que la mejor manera de manejar el «doColorChange()» función. Es mejor crear dos clases CSS para los dos colores, entonces tiene doColorChange interruptor de ellos? O es mejor dar las dos enlaces de un identificador y de alguna manera establecer las propiedades de color de allí? ¿Cómo puedo lograr esto?

InformationsquelleAutor Teslar | 2011-04-22

7 Kommentare

  1. 9

    JQUERY:

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

    EL LENGUAJE DE MARCADO HTML:

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

    Sugiero agregar una clase a los enlaces, que se forma es más fácil.

    CSS:

    a.link.active { color:blue; }

    Añadido una Versión en Vivo (violín): http://jsfiddle.net/gHb9F/

  2. 3

    HTML

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

    Secuencia de comandos (usando jQuery)

    $(document).ready(function(){
        $('a').click(function(){
            $('a').css('color', 'black');
            $(this).css('color', 'blue');
        });
    });

    CSS

    a:link { color: black; }
    a:visited { color: black; }

    El violín aquí

    Nota: El cambio de color puede ser aplicado a todos anclajes actual en su página. Si desea limitar a unos pocos, a continuación, ponerlos en una clase y agregar la clase a del selector.

    Edición:

    Si usted planea hacer otra cosa que simple color de intercambio, a continuación, las clases son definitivamente el camino a seguir (basta con sustituir la .css llamadas para .addClass y .removeClass con su costumbre de nombres de la clase.

  3. 2

    Prueba este código. Me pareció fácil de usar.

           <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. 0

    Su defecto CSS color para los enlaces deben ser:

    a:link {
        color: #0f0; /* or
        color: green;
        color: rgb(0,255,0);
    }

    De lo contrario, el uso de jQuery, lo puedes conseguir con:

    $('a').click(
        function(){
            $('.selectedLink').removeClass('selectedLink');
            $(this).addClass('selectedLink');
            return false
        });

    Junto con el CSS:

    .selectedLink {
        color: #00f;
    }

    JS Violín demo.

  5. 0

    Hacer 2 diferentes clases en css y, a continuación, intercambiar clases en los enlaces al hacer clic en su enlace.
    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');
    
    });
  6. 0

    dando a los elementos de las clases css sería una mejor opción. Usted puede hacer esto mediante el uso de la propiedad className en el objeto. en doCOlorChange podría escribir this.className ="newclassName";

Kommentieren Sie den Artikel

Bitte geben Sie Ihren Kommentar ein!
Bitte geben Sie hier Ihren Namen ein

Pruebas en línea