jQuery al hacer clic en un enlace añadir inline style

KoNGo #1 May '13

Soy muy torpe y apenas se usar jQuery, pero lo que quiero es que cuando hago clic en un enlace (los que yo especifique mediante id, class, lo que sea) me añada un inline style, al elemento que yo indique.

Exactamente es para cuando hago clic en un enlace me añada un margin-top al h3 que yo quiera. Esto seguro que es muy sencillo y he estado googleando pero no he encontrado nada que entendiese.

A ver si alguno me echa una mano, gracias.

Wasd #2 May '13

Pega aquí el código HTML, a ver como lo tienes montado.

1 respuesta

elkaoD #3 May '13

#1 $(elemento).css('propiedad', 'valor');

1 respuesta

KoNGo #4 May '13

#2 Ahora no puedo pegártelo, pero es muy simple.

<a href="#menu1">Titulo 1</a>

<h3 id="menu1">Titulo 1</h3>

Es simplemente eso, que al hacer clic en el enlace, añada margin-top al h3.

#3 Si fueras tan amable de desarrollar eso un poco más... es que soy bastante novato y sólo con ese código no haga nada, gracias . Ahí supongo que faltaría algo de on click o algo así.

2 respuestas

elkaoD #5 May '13

#4 http://www.w3schools.com/jquery/

Mírate del menú de la izquierda syntax, selectors y events.

O http://theproc.es/2011/2/15/13527/eventos-en-jquery--tutorial-basico-para-comenzar-a-trabajar-con-jquery--parte-2-de-4-

1 respuesta

Baltar #6 May '13

#1 Yo suelo ponerlo con un elemento div para usar el atributo 'onclick' del mismo. Con eso puedes hacer lo que quieras.

Wasd #7 May '13

#4

HTML

<a href="#menu1" onclick="pepito()">Titulo 1</a>

JS:

function pepito(){
	$('#menu1').css('margin-top', '20px');
}

Pero esto es una chapuza rápida. Si quieres algo más elaborado tienes que dar más detalles, y el código será más extenso.

MrTurbo #8 May '13

<script type="text/javascript">
  $(document).ready(function(){
    $('.classEnlace').on('click', function(event) {
      event.preventDefault(); // Para que no siga ese enlace
      $('#menu1').css('margin-top', '50px');
    });
  });
</script>

<a href="#menu1" class="classEnlace">Titulo 1</a>
<h3 id="menu1">Titulo 1</h3>

¿Algo así?

1 respuesta

KoNGo #9 May '13

#5 Echaré un ojo a eso a ver si aprendo a hacer estas tonterías, gracias.

#8 Exactamente eso gracias. Salvo por un pequeño detalle que me ha surgido ahora.

Yo tengo

<a href="#menu1">Titulo 1</a>

<h3 id="menu1">Titulo 1</h3>

<a href="#menu1">Titulo 2</a>

<h3 id="menu1">Titulo 2</h3>

<a href="#menu1">Titulo 3</a>

<h3 id="menu1">Titulo 3</h3>

<a href="#menu1">Titulo 4</a>

<h3 id="menu1">Titulo 4</h3>

Así hasta... unos 40 títulos... entonces una opción es ponerle una clase diferente a cada uno y una función a cada uno para que funcionen por separado, pero eso es una chapuza 40 funciones xD. Porque tal y como lo tengo ahora yo, cuando clickeo en por ejemplo #menu1 me pone el padding a todos los h3.

No sé si me explico.

1 respuesta

MrTurbo #10 May '13

#9 Una solución un poco chapucera y rápida:

<script type="text/javascript">
  $(document).ready(function(){
    $('.classEnlace').on('click', function(event) {
      event.preventDefault(); // Para que no siga ese enlace
      var menuSobreelQueActuar = $(this).attr('data-menu').val();

  $('#'+menuSobreelQueActuar).css('margin-top', '50px');
});
  });
</script>


<a href="#menu1" class="classEnlace" data-menu="menu1">Titulo 1</a>
<h3 id="menu1">Titulo 1</h3>

<a href="#menu1" class="classEnlace" data-menu="menu2">Titulo 2</a>
<h3 id="menu2">Titulo 2</h3>

<a href="#menu1" class="classEnlace" data-menu="menu3">Titulo 3</a>
<h3 id="menu3">Titulo 3</h3>

<a href="#menu1" class="classEnlace" data-menu="menu4">Titulo 4</a>
<h3 id="menu4">Titulo 4</h3>

1 respuesta

KoNGo #11 May '13

#10 Probaré, gracias crack.

jQuery al hacer clic en un enlace añadir inline style

Usuarios habituales

Tags