jQuery - Use variable to target element

JavaScript
1

Hi all

I have a simplified version of what I’m working with here

http://www.ttmt.org.uk/forum/4_Gallery/

The page scrolls when the links are clicked to show the relevant div.

My problem is I want to change the color of the link when it’s pressed to illustrate which section is being shown.

This is the function I’m using to scroll the page


    function slideContent(div){
      var $btn = div+'Btn';
      var $content = $('#content');
      var divPos = $('#content ' + div).position();
      var scrollPosition = $content.scrollTop()+divPos.top;
      $('#content').animate({scrollTop: scrollPosition}, 500);
      //$('#OneBtn').css('color','red');
      //alert($btn);
      $btn.css('color','red');
    }

I can capture the name of the Link to highlight in the variable here


var $btn = div+'Btn';

How can I use this variable to change the color of the link

I tried this, but no luck


$btn.css('color','red');

*** Code*****


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

	<title>untitled</title>
	<script src="js/jquery-1.4.3.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/lightbox.js"></script>
	<script type="text/javascript" >
    function slideContent(div){
      var $btn = div+'Btn';
      var $content = $('#content');
      var divPos = $('#content ' + div).position();
      var scrollPosition = $content.scrollTop()+divPos.top;
      $('#content').animate({scrollTop: scrollPosition}, 500);
      //$('#OneBtn').css('color','red');
      //alert($btn);
      $btn.css('color','red');
    }
	</script>
	<link rel="stylesheet" href="css/master.css" type="text/css" />
</head>

<body>
  <div id="wrap">
    <div id="header">
      <h1>Gallery</h1>

      <ul>
        <li><a href="#" id="OneBtn" onclick="slideContent('#One')">One</a></li>
        <li><a href="#" id="TwoBtn" onclick="slideContent('#Two')">Two</a></li>
        <li><a href="#" id="ThreeBtn" onclick="slideContent('#Three')">Three</a></li>
      </ul>

    </div><!-- #header -->
    <div id="content">
      <div id="One" class="section">
        <ul>
          <li><a href="images/01.jpg" rel="lightbox"><img src="images/01_th.jpg" alt="" /></a></li>
          <li><a href="images/02.jpg" rel="lightbox"><img src="images/02_th.jpg" alt="" /></a></li>
          <li><a href="images/03.jpg" rel="lightbox"><img src="images/03_th.jpg" alt="" /></a></li>
          <li><a href="images/04.jpg" rel="lightbox"><img src="images/04_th.jpg" alt="" /></a></li>
          <li><a href="images/05.jpg" rel="lightbox"><img src="images/05_th.jpg" alt="" /></a></li>
          <li><a href="images/06.jpg" rel="lightbox"><img src="images/06_th.jpg" alt="" /></a></li>
          <li><a href="images/07.jpg" rel="lightbox"><img src="images/07_th.jpg" alt="" /></a></li>
          <li><a href="images/08.jpg" rel="lightbox"><img src="images/08_th.jpg" alt="" /></a></li>
          <li><a href="images/09.jpg" rel="lightbox"><img src="images/09_th.jpg" alt="" /></a></li>
          <li><a href="images/10.jpg" rel="lightbox"><img src="images/10_th.jpg" alt="" /></a></li>
        </ul>
      </div>
      <div id="Two" class="section">
        <ul>
          <li><a href="images/11.jpg" rel="lightbox"><img src="images/11_th.jpg" alt="" /></a></li>
          <li><a href="images/12.jpg" rel="lightbox"><img src="images/12_th.jpg" alt="" /></a></li>
          <li><a href="images/13.jpg" rel="lightbox"><img src="images/13_th.jpg" alt="" /></a></li>
          <li><a href="images/14.jpg" rel="lightbox"><img src="images/14_th.jpg" alt="" /></a></li>
          <li><a href="images/15.jpg" rel="lightbox"><img src="images/15_th.jpg" alt="" /></a></li>
          <li><a href="images/16.jpg" rel="lightbox"><img src="images/16_th.jpg" alt="" /></a></li>
          <li><a href="images/17.jpg" rel="lightbox"><img src="images/17_th.jpg" alt="" /></a></li>
          <li><a href="images/18.jpg" rel="lightbox"><img src="images/18_th.jpg" alt="" /></a></li>
          <li><a href="images/19.jpg" rel="lightbox"><img src="images/19_th.jpg" alt="" /></a></li>
          <li><a href="images/20.jpg" rel="lightbox"><img src="images/20_th.jpg" alt="" /></a></li>
        </ul>
      </div>
      <div id="Three" class="section">
        <ul>
          <li><a href="images/01.jpg" rel="lightbox"><img src="images/01_th.jpg" alt="" /></a></li>
          <li><a href="images/02.jpg" rel="lightbox"><img src="images/02_th.jpg" alt="" /></a></li>
          <li><a href="images/03.jpg" rel="lightbox"><img src="images/03_th.jpg" alt="" /></a></li>
          <li><a href="images/04.jpg" rel="lightbox"><img src="images/04_th.jpg" alt="" /></a></li>
          <li><a href="images/05.jpg" rel="lightbox"><img src="images/05_th.jpg" alt="" /></a></li>
          <li><a href="images/06.jpg" rel="lightbox"><img src="images/06_th.jpg" alt="" /></a></li>
          <li><a href="images/07.jpg" rel="lightbox"><img src="images/07_th.jpg" alt="" /></a></li>
          <li><a href="images/08.jpg" rel="lightbox"><img src="images/08_th.jpg" alt="" /></a></li>
          <li><a href="images/09.jpg" rel="lightbox"><img src="images/09_th.jpg" alt="" /></a></li>
          <li><a href="images/10.jpg" rel="lightbox"><img src="images/10_th.jpg" alt="" /></a></li>
        </ul>
      </div>

    </div><!-- #content -->
  </div><!-- #wrap -->

</body>
</html>
2

You’re just storing the name/id of the element in $btn, not selecting it with JQuery:


var $btn = div+'Btn'; //this gives you the name/id of the element
var $el = $('#' + $btn); //assuming you are referencing the element by id
$el.css('color', 'red');

I think that’s something along the lines of what you need!