Try this
<script>
$(document).ready(function(){
$('a').click(function() {
$(this).toggleClass('active');
showPic(this);
return false;
});
});
</script>
...
<div class="img_selector">Image
<ul>
<li><a class="active" href="images/stoppino_tictacs_lit.jpg"
title="">01</a></li>
<li><a href="images/stoppino_tictacs.jpg"
title="">02</a></li>
<li><a href="images/stoppino_tictac_base1.jpg"
title="">03</a></li>
<li><a href="images/stoppino_tictac_base2.jpg"
title="">04</a></li>
</ul>
</div>
- Richard
On Mon, Nov 2, 2009 at 2:48 PM, Bernard Elsmere
<bernard.elsm...@gmail.com>wrote:
> Hello
>
> I'm trying to implement a minimal navigation bar using jQuery's
> toggleClass() function but can't seem to get it working, no matter how
> many tips from all you gurus out there that I follow meticulously.
>
> It's the .img_selector div at the bottom of the page:
> http://www.thomasrugani.com/static/designobjects/02.html
>
> I want to toggle the 'active' class for each <a> when it's selected,
> to indicate which image is showing, so after calling jQuery, in the
> <head> I've got
>
> <script type="text/javascript">
> $(document).ready(function(){
> $('a').click(function () {
> $(this).toggleClass('active');
> });
> });
> </script>
>
> then the links, which also include the showPic function:
> ---------------
> <div class="img_selector">
> Image
> <ul>
> <li><a class="active" onclick="return showPic(this)"
> href="images/
> stoppino_tictacs_lit.jpg" title="">01</a></li>
> <li><a onclick="return showPic(this)" href="images/
> stoppino_tictacs.jpg" title="">02</a></li>
> <li><a onclick="return showPic(this)" href="images/
> stoppino_tictac_base1.jpg" title="">03</a></li>
> <li><a onclick="return showPic(this)" href="images/
> stoppino_tictac_base2.jpg" title="">04</a></li>
> </ul>
> </div>
> --------------------
> Can anyone see what I'm missing? Thanks in advance..
>
> Bernard
>
