Nuevo en jQuery / javascript aquí y buscando un poco de ayuda. Estoy escribiendo un sitio con un menú de navegación simple. Funciona así. Un usuario hace clic en un enlace en el menú, el enlace se establece en un color 'activo' y la sección correspondiente se establece de oculta a visible (todas las secciones se configuran como ocultas cuando se carga el documento). Cuando el usuario hace clic en otro vínculo, ese vínculo se establece en el color activo, los demás se establecen en el color predeterminado, las secciones visibles se ocultan y la sección relevante se establece en visible. Esto funciona bien, pero usé elementos individuales y es muy feo con mucha repetición. Estoy en el proceso de reescribir el código para usar .classes y ser un poco más flexible con menos código repetido.

La pregunta que tengo es esta: ¿Cómo le digo qué sección mostrar?

El usuario hace clic en a.linkfornavigation, el color está configurado, la sección.blah está configurada como oculta, la sección # thisiswhatyouwant está configurada como visible. Pero, ¿cómo le digo a a.linkfornavigation dónde debería apuntar? cada sección tiene un #id único (supongo que podría hacer clic en el enlace en el que hacen clic), pero ¿cómo obtengo el #id de la sección vinculada relevante del enlace en el que se hizo clic?

Cualquier ayuda sería muy apreciada.

Html:

<!DOCTYPE html>
<html>     
  <head>
    <link rel="stylesheet" href="css/linkthinger-hybrid.css" />
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/linkthinger-hybrid.js" type="text/javascript"></script>
  </head>

  <body>

    <section id="links">
      <a class="thinger" href="#">Thing One</a>
      <a class="thinger" href="#">Thing Two</a>
      <a class="thinger" href="#">Thing Three</a>
      <a class="thinger" href="#">Thing Four</a>
      <a class="thinger" href="#">Thing Five</a>
    </section>

    <section id="things">
      <section id="thingone"   class="thing">I am thing one.</section>
      <section id="thingtwo"   class="thing">I am thing two.</section>
      <section id="thingthree" class="thing">I am thing three.</section>
      <section id="thingfour"  class="thing">I am thing four.</section>
      <section id="thingfive"  class="thing">I am thing five.</section>
    </section>

  </body>

Javascript:

    $(document).ready(function(){

//  Hides .thing class as soon as the DOM is ready.
//  $('section.thing').hide(0);

//  Highlight selected link & set all others to default.  
  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
  });

//  Shows one section and hides all others on clicking the noted link.
  $('a.thinger').click(function() {
    $('section.thing').hide(0);
    $('#thingone').fadeIn('slow');
    return false;
  });

})

Css:

a {
    color: darkgreen;
    }

.selected {
    color: red;
    }

section.thing {
    background-color: blue;
    }
0
Don Graziano 24 ago. 2011 a las 22:45

4 respuestas

La mejor respuesta

Dé a los enlaces los valores href adecuados. En este caso, serían los ID de los elementos:

<a class="thinger" href="#thingone">Thing One</a>
<a class="thinger" href="#thingtwo">Thing Two</a>
....

La ventaja es que al hacer clic en los enlaces, el navegador saltará al elemento correspondiente, incluso si JavaScript está deshabilitado.

Luego accede a este atributo y lo usa como selector de ID para jQuery:

$('a.thinger').click(function() {
    $('section.thing').hide(0);
    $($(this).attr('href')).fadeIn('slow');
    return false;
});
3
Felix Kling 24 ago. 2011 a las 18:48

Cambie esta línea:

$('#thingone').fadeIn('slow');

A esto:

$('#things .thing').eq($(this).index('a.thinger')).fadeIn('slow');

Funciona porque $(this).index('a.thinger') devuelve un índice entero del ancla en la que se hizo clic, y .eq(i) devuelve un objeto jQuery que contiene el elemento i th del objeto JQuery en el que se llama.

JQuery Docs:

0
Paul 24 ago. 2011 a las 18:50

alert($(this).attr('id'); si te mantienes fiel a jQuery

-1
Tim Withers 24 ago. 2011 a las 18:48

Para obtener la identificación de un elemento en el que se hizo clic: this.id

Para decirle qué sección abrir, puede agregar algún atributo data- para determinarlo:

<section id="links">
  <a class="thinger" href="#" data-open="thingone">Thing One</a>
  <a class="thinger" href="#" data-open="thingtwo">Thing Two</a>
  <a class="thinger" href="#" data-open="thingthree">Thing Three</a>
  <a class="thinger" href="#" data-open="thingfour">Thing Four</a>
  <a class="thinger" href="#" data-open="thingfive">Thing Five</a>
</section>

Js:

  $('#links a').click(function(){
    $(this).addClass('selected');
    $(this).siblings().removeClass('selected');
    $('.thing').hide();
    $("#"+$(this).data('open')).show();
  });

Fiddle Demo: http://jsfiddle.net/maniator/sxrap/

0
Naftali aka Neal 24 ago. 2011 a las 18:47