CODEWITHSUNDEEP
javascripthtmlhyperlink
mezzie
mezzie

Reputation: 49

How can I get links to stay active?

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?

Upvotes: 1

Views: 578

Answers (2)

extremeFE
extremeFE

Reputation: 40

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>

Upvotes: 1

Vinod
Vinod

Reputation: 396

You could try this...

first create a Cascaded style sheet(CSS) and in it write the code like :

a:active {
    color: #006600;
    font: 12px Verdana, Arial, Helvetica, San-serif;
    text-decoration: none;
}

or

a:visited {
    color: #006600;
    font: 12px Verdana, Arial, Helvetica, San-serif;
    text-decoration: none;
}

or

a:link {
    color: #006600;
    font: 12px Verdana, Arial, Helvetica, San-serif;
    text-decoration: none;
}

then paste this code in the head of your html page:

 <link type="text/css" href="<Path of the CSS>.css" rel="stylesheet"/>

Upvotes: 0

Related Questions