CODEWITHSUNDEEP
javascriptjquery
Don Wei
Don Wei

Reputation: 431

How does one to get the #id of an element from a clicked link using jQuery?

New to jQuery/javascript here and looking for a little help. I am writing a site with a simple navigation menu. It works like this. A user clicks a link in the menu, the link is set to an 'active' colour and the appropriate section is set from hidden to visible ( all of the sections are set to hidden when the document loads ). When the user clicks another link that link is set to the active color, the others are set to the default colour, any visible sections are set to hidden and the relevant section is set to visible. This works just fine, but I used individual element and its very ugly with a lot of repetition. I am in the process of rewriting the code to use .classes and be a little bit more flexible with less repeated code.

The Question I have is this: How do I tell it what section to show?

User clicks on a.linkfornavigation, colour is set, section.blah are set to hidden, section#thisiswhatyouwant is set to visible. But how do I tell a.linkfornavigation where it should point? each section has a unique #id ( I guess so could the link they click ) but how do I get the #id of the relevant linked section from the clicked link?

Any help at all would be very much appreciated.

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

Upvotes: 0

Views: 1906

Answers (4)

Paul
Paul

Reputation: 141839

Change this line:

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

To this:

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

It works because $(this).index('a.thinger') returns an integer index of the anchor clicked, and .eq(i) returns a jQuery object containing the ith element from the JQuery object it's called on.

jQuery Docs:

Upvotes: 0

Tim Withers
Tim Withers

Reputation: 12059

alert($(this).attr('id'); if you are staying true to jQuery

Upvotes: -1

Felix Kling
Felix Kling

Reputation: 816334

Give the links proper href values. In this case it would be the IDs of the elements:

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

The advantage is that clicking on the links will make the browser jump to the corresponding element, even if JavaScript is disabled.

Then you access this attribute and use it as ID selector for jQuery:

$('a.thinger').click(function() {
    $('section.thing').hide(0);
    $($(this).attr('href')).fadeIn('slow');
    return false;
});

Upvotes: 3

Naftali
Naftali

Reputation: 146302

To get the id of a clicked element do: this.id

To tell it what section to open you can add some data- attribute to determine it:

<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/

Upvotes: 0

Related Questions