¿Cómo es posible cambiar el contenido de este div, cuando uno de los ENLACES que se hace clic?

<div align="center" id="content-container">
    <a href="#" class="click cgreen">Main Balance</a>
    <a href="#" class="click cgreen">PayPal</a>
    <a href="#" class="click cgreen">AlertPay</a>
</div>

6 Comentarios

  1. 135

    Puede suscribirse para el .haga clic en evento por los enlaces y cambiar el contenido de la etiqueta div usando el .html método:

    $('.click').click(function() {
        //get the contents of the link that was clicked
        var linkText = $(this).text();
    
        //replace the contents of the div with the link text
        $('#content-container').html(linkText);
    
        //cancel the default action of the link by returning false
        return false;
    });

    Nota, sin embargo, que si usted reemplace el contenido de este div haga clic en el controlador que tiene asignado será destruido. Si usted tiene la intención de inyectar algunos de los nuevos elementos del DOM dentro de la etiqueta div para que usted necesita para conectar los controladores de eventos, este adjuntos deben ser realizados dentro de la .haga clic en controlador después de la inserción de nuevos contenidos. Si el selector original del evento se conserva también puede echar un vistazo a la .delegado método para conectar el controlador.

    • ¿Cómo puedo, a continuación, cargar el contenido de OTRO div, en la misma página, en #contenido-contenedor?
    • Jensen, como este: $('#content-container').html($('#someOtherDivId').html());
    • gracias a dios! Me di cuenta de que #div se puede cambiar por .val(); la función en lugar de ello, debemos utilizar .html(); funciones para hacer que funcione! 😀 @brosmio gracias
    • vivir protector de @DarinDimitrov
  2. 14

    Hay 2 de las funciones de jQuery que usted querrá usar aquí.

    1) click. Esto le llevará a una función anónima como único parámetro, y lo ejecuta cuando el elemento se hace clic.

    2) html. Esto tomará una cadena html como único parámetro, y reemplazar el contenido de su elemento con el código html proporcionado.

    Así que, en su caso, usted querrá hacer las siguientes:

    $('#content-container a').click(function(e){
        $(this).parent().html('<a href="#">I\'m a new link</a>');
        e.preventDefault();
    });

    Si sólo desea agregar contenido de su div, en lugar de reemplazar todo en él, usted debe utilizar append:

    $('#content-container a').click(function(e){
        $(this).parent().append('<a href="#">I\'m a new link</a>');
        e.preventDefault();
    });

    Si quieres el nuevo añadido enlaces a también añadir nuevo contenido al hacer clic, usted debe utilizar evento delegación:

    $('#content-container').on('click', 'a', function(e){
        $(this).parent().append('<a href="#">I\'m a new link</a>');
        e.preventDefault();
    });
  3. 1

    Usted puede tratar de la misma con replacewith()

    $('.click').click(function() {
        //get the contents of the link that was clicked
        var linkText = $(this).text();
    
        //replace the contents of the div with the link text
        $('#content-container').replaceWith(linkText);
    
        //cancel the default action of the link by returning false
        return false;
    });

    La .replaceWith() método elimina el contenido de la DOM y se inserta el contenido nuevo en su lugar con una sola llamada.

Dejar respuesta

Please enter your comment!
Please enter your name here