jquery anchor link

Posted on 2011-10-07
Last Modified: 2012-05-12

Hello Experts,

i am trying to do the following:

I have an FAQ page. each question has an anchor link (<a name="faq1" class="anchor"></a>)
on the right hand-side i have a list of all the questions with a link to the anchor (<a href="#faq1">).

What i am trying to achieve is to highlight the question when its active. Meaning when the browser is at e.g. "page_name.html#faq5" the faq5 in the page is highlighted.

is it possible?  
Question by:Refael
    LVL 12

    Accepted Solution

    As usual with jQuery, there are many different ways to achieve this.  One way might be this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .hilite { background: #ffc; }
    <script src="" language="javascript"></script>
    <script language="javascript">
    $(document).ready(function() {
       $('#faqList li a').click(function() {
          $('.hilite').removeClass('hilite'); // remove the previous one
          var myId = this.href.split(/#/)[1];  // e.g. 'faq1'
          $('#'+myId).addClass('hilite');  // add the highlight class
    <ul id="faqList">
       <li><a href="#faq1">FAQ 1</a></li>
       <li><a href="#faq2">FAQ 2</a></li>
       <li><a href="#faq3">FAQ 3</a></li>
    <div id="faq1" style="width: 200px;">
      <h3>FAQ 1</h3>
      Lorem Ipsum, and all that stuff
    <div id="faq2" style="width: 200px; margin-top: 30px;">
      <h3>FAQ 2</h3>
      Lorem Ipsum, and all that stuff
    <div id="faq3" style="width: 200px; margin-top: 30px;">
      <h3>FAQ 3</h3>
      Lorem Ipsum, and all that stuff

    Open in new window

    Here's a link to a working demo:

    Author Closing Comment

    zappafan2k2, thank you so much!

    It took sometime for me to understand the logic.
    Thank you so much for the in-depth example!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
    Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…
    The viewer will learn how to dynamically set the form action using jQuery.
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

    779 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    17 Experts available now in Live!

    Get 1:1 Help Now