Home/ Questions/Q 6382501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T02:31:50+00:00

New to jQuery/javascript here and looking for a little help. I am writing a

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
});
    • 0