Question

I’m trying to make a one page website with a menu (pictures, css roll over…), that will display a different div when each menu button is clicked. Only one div will be shown at time though and if one is already open it should be hidden. This is working well.

The problem I am having is that that the menu button which shows the result will not stay selected i.e. on the same picture as the roll over (hover).

HTML :

<ul class="menu">
    <li class="home"><a href="javascript:showHide('content1');" title="Home"><span class="displace"></span></a></li>
    <li class="credits"><a href="javascript:showHide('content2');" title="Credits"><span class="displace"></span></a></li>
    <li class="idea"><a href="javascript:showHide('content3');" title="Idea"><span class="displace"></span></a></li>
</ul>

<div id="content1">home text</div>
<div id="content2">credits text1</div>
<div id="content3">idea text</div>​

JS / jQuery :

function showHide(d)
{
var onediv = document.getElementById(d);
var divs=['content1','content2','content3'];
for (var i=0;i<divs.length;i++)
  {
  if (onediv != document.getElementById(divs[i]))
    {
    document.getElementById(divs[i]).style.display='none';
    }
  }
onediv.style.display = 'block';
}


$(function stay() {
    $('menu').click(function stay() {
            $('menu').removeClass('selected');
            $(this).addClass('selected');

    });
});
​

Demo: http://jsfiddle.net/anKT3/159/

I’ve tried creating a function to change the class, but I’ve not had any luck.

Answer 1

Change your stay() function to be as follows:

$(function stay() {
    $('.menu li a').click(function stay() {            
            $('.menu li a').removeClass('selected');
            $(this).addClass('selected');                        
    });
});