1. Inicio
  2. Pregunta y respuesta
  3. jQuery Intercambio de elementos

jQuery Intercambio de elementos

2008-10-24 18 views
5

Ok me dejó hacer un ejemplo:jQuery Intercambio de elementos

<head> 
<script type="text/javascript"> 
$(document).ready(function(){ 

    $("#options_2").hide(); 
    $("#options_3").hide(); 

}); 
</script> 
</head> 
<body> 
<div id="options_1">option 1</div> 
<div id="options_2">option 2</div> 
<div id="options_3">option 3</div> 
<a href="" class="selected">choose option 1</a> 
<a href="">choose option 2</a> 
<a href="">choose option 3</a> 
</body>

Como se puede ver única opción 1 es visible por defecto y, el enlace se hace clic para mostrar la opción 1 tiene la clase = "seleccionado" por defecto , mostrando al usuario que esa opción está actualmente seleccionada. Básicamente lo quiero para que cuando hagan clic en "elegir opción 2", las opciones 1 div se oculten y se muestre la opción 2 div, y luego le dé al segundo enlace la clase seleccionada y elimine la clase del enlace de la imagen.

Básicamente solo pestañas usando enlaces y divs pero debido al formato que tengo para mostrarlo no puedo usar ninguno de los complementos de pestañas que he encontrado en línea.

Fuente

2008-10-24 zuk1

Respuesta

12

en primer lugar dar a sus enlaces de una clase o Id (he usado una clase), lo que hará más fácil de hacer el intercambio en

<div id="options_1" class="tab" >option 1</div> 
<div id="options_2" class="tab">option 2</div> 
<div id="options_3" class="tab">option 3</div> 

$(document).ready(function() { 

    var clickHandler = function (link) { 
     $('.tab').hide(); 
     $('#option_' + link.data.id).show(); 
     $('.selected').removeClass('selected'); 
     $(this).attr('class','selected'); 
    } 

    $('.link1').bind('click', {id:'1'} ,clickHandler); 
    $('.link2').bind('click', {id:'2'} ,clickHandler); 
    $('.link3').bind('click', {id:'3'} ,clickHandler); 
})

Fuente

2008-10-24 15:26:56

+0

¡Te agradezco indefinidamente, después de eliminar los errores ortográficos en tu código funcionó perfectamente! – zuk1

+0

fantástico - me alegro de poder ayudar :) –

+1

Si está usando múltiples clases por elemento, $ (this) .attr ('clase', 'seleccionado') es demasiado torpe ya que elimina todas las demás clases excepto 'seleccionada'. En su lugar, use $ (this) .addClass ('selected') y todas las demás clases permanecerán en su lugar. – markedup

2

Dado el formato de su dado que haría algo como lo siguiente, asignar a cada enlace con un id que puede referirse comprensible que se asocia div (como "link_1" para "opción_1") y utilizar los siguientes jQuery:

$('a#link_1').click(function() { 
    $(this).attr("class", "selected"); 
    $(this).siblings('a').removeClass("selected"); 
    $('div#option_1').show(); 
    $('div#option_1').siblings('div').hide(); 
}); 
    $('a#link_2').click(function() { 
    $(this).attr("class", "selected"); 
    $(this).siblings('a').removeClass("selected"); 
    $('div#option_2').show(); 
    $('div#option_2').siblings('div').hide(); 
}); 
    $('a#link_3').click(function() { 
    $(this).attr("class", "selected"); 
    $(this).siblings('a').removeClass("selected"); 
    $('div#option_3').show(); 
    $('div#option_3').siblings('div').hide(); 
});

no he hecho jQuery por un tiempo, pero que debería estar bien :)

Fuente

2008-10-24 15:23:36

+0

no funcionaban, pero no estoy seguro de por qué, maldita Java y es no mostrar errores. Al mirar el código, parece tener sentido (aunque recién comencé a explorar jQuery) ... – zuk1

1

Puede ayudarse a sí mismo si agrega ID a sus enlaces en el formulario 'options_1_select' y una clase 'abridor'. A continuación, puede asignar un único controlador de eventos a todos sus enlaces:

$('a.opener').click(function() { 
    // mark current link as selected and unmark all others 
    $(this) 
    .addClass('selected') 
    .siblings('a').removeClass('selected'); 

    // find a div to show, and hide its siblings 
    $('#' + $(this).attr('id').substring(0, 9)) 
    .show() 
    .siblings('div').hide(); 
});

Fuente

2008-10-24 15:32:25

Cuestiones relacionadas

 Cuestiones relacionadas