[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 529
  • Last Modified:

jquery anchor link


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?  
0
Refael
Asked:
Refael
1 Solution
 
zappafan2k2Commented:
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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.hilite { background: #ffc; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" 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
      });
   });
</script>
</head>  
<body> 
<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>
</ul>
<div id="faq1" style="width: 200px;">
  <h3>FAQ 1</h3>
  Lorem Ipsum, and all that stuff
</div>
<div id="faq2" style="width: 200px; margin-top: 30px;">
  <h3>FAQ 2</h3>
  Lorem Ipsum, and all that stuff
</div>
<div id="faq3" style="width: 200px; margin-top: 30px;">
  <h3>FAQ 3</h3>
  Lorem Ipsum, and all that stuff
</div>
</body>
</html>

Open in new window


Here's a link to a working demo:
http://jsfiddle.net/JnwBY/
0
 
RefaelAuthor Commented:
zappafan2k2, thank you so much!

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

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now