Question

I’m making a site with a lecture on. The lecture is divided into chapters. Each chapter has it’s own link and when clicked a new video loads an external html get loaded into a text window. I need these links to stay active, so that ppl know what chapter they’re on.

Here’s my current html:

<li><a href="#" onclick="javascript:loadContent('#pres', chapter1.html');changeVideo('chapter1')">chapter1</a></li>
<li><a href="#" onclick="javascript:loadContent('#pres', 'chapter2.html');changeVideo('chapter2')">chapter2</a></li>

..and so on..

Now, this works perfectly.. As I said, I need the links to stay active, and tried adding an addClass(this)
I.E:

onclick="javascript:loadContent('#pres','chapter2.html');changeVideo('chapter2');addClass(this)">... 

function addClass(obj)
{
  obj.className="active";
}

This doesn’t work. I’ve also tried removing everything but the addClass function with no luck.

Any ideas?

Answer 1

function clickChapter(type, page, chapter){
    loadContent(type, page);
    changeVideo(chapter);
    removeAllClass();
    addClass(ocument.getElementById('id_'+chapter));
}

function removeAllClass(){
    var aAnchor = document.getElementsByTagName('A');
    for(var i=0; i<aAnchor.length;  i++){
        aAnchor[i].className = '';
    }
}

<li><a href="#" id="id_chapter1" onclick="clickChapter('#pres', 'chapter1.html', 'chapter1')">chapter1</a></li>
<li><a href="#" id="id_chapter2" onclick="clickChapter('#pres', 'chapter2.html', 'chapter2')">chapter2</a></li>