How to show a specific div with its own id in jQuery when I click a link?

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?

Answers


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();
});

Need Your Help

What is the performance (Big-O) for removeAll() of a treeset?

big-o treeset removeall

I'm taking a Java data structures course atm. One of my assignment asks me to choose a data structure of my choice and write a spell checker program. I am in the process of checking the performance...

Problem with skipping empty cells while importing data from .xlsx file in asp.net c# application

c# parsing spreadsheet xlsx

I have a problem with reading .xlsx files in asp.net mvc2.0 application, using c#. Problem occurs when reading empty cell from .xlsx file. My code simply skips this cell and reads the next one.