Question

I have a div like this:

<article id="#pippo">blablabla</article>

that I have hided with jQuery

$('article').hide();

now I’d like to have a link menu that show a specific article id when it’s clicked for example.

If I click on link:

<a href="#pippo"> LINK PIPPO </a>

I’d like that the article named #pippo is shown

if I click on link that point to #pluto, an article with id #pluto have to be shown…

how can I do this in jQuery?

Answer 1

If you want this to work for every <a> tag on your page then you can do the following

$('a').click(function (e) {
  var id = $(this).attr('href');
  $(id).show();

  // Don't follow the link
  e.preventDefault();
});

More likely though you want this to work on a subset of <a> on the page. If so you can distinguish them by putting a class in the link and changing your selector as appropriate

HTML:

<a href="#pippo" class="fakeLink"> LINK PIPPO </a>

JavaScript:

$('a.fakeLink').click(function (e) {
  var id = $(this).attr('href');
  $(id).show();

  // Don't follow the link
  e.preventDefault();
});