I've been trying to adapt the below code to my own code but it didn't work. So, finally I tried to run this code as is & it didn't work either.
I'm trying to highlight bookmarked areas with a hyperlinked list. Clicking on a link is supposed to highlight the bookmarked paragraph; my understanding was that once you clicked a different link that particular highlighted paragraph would change back to normal & the newly clicked linked paragraph would be highlighted. However,in FF2 & IE6 & 8, nothing occurs.
I am farirly new to Javascript, but ususally if I get a script, I can adapt it to my needs. Here is the code:
I'm trying to highlight bookmarked areas with a hyperlinked list. Clicking on a link is supposed to highlight the bookmarked paragraph; my understanding was that once you clicked a different link that particular highlighted paragraph would change back to normal & the newly clicked linked paragraph would be highlighted. However,in FF2 & IE6 & 8, nothing occurs.
I am farirly new to Javascript, but ususally if I get a script, I can adapt it to my needs. Here is the code:
Code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<script type="text/javascript">
function addNormalClass() {
this.className = 'normal';
}
function highlightTarget() {
// Collect the relevant items:
var contentsArticles = document.getElementById('articles').getElementsByTagName('p');
// Loop through them:
for (var j=0;j<contentsArticles.length;j++) {
if (contentsArticles[j].className == 'highlighted') {
// If one of them has a class name of 'highlighted,' change it to 'normal':
contentsArticles[j].className = 'normal';
}
}
// What is the url of the clicked link?
var url = this.href;
// Get everything after the '#' in the link--that's our id
var elementId = url.substring(url.lastIndexOf('#') + 1);
// Get the element:
var currentTarget = document.getElementById(elementId);
// Change its classname:
currentTarget.className = 'highlighted';
}
function buildContentsArray() {
// First collect all the links to contents and the contents they link to:
var contentsLinks = document.getElementById('contents').getElementsByTagName('a');
var contentsArticles = document.getElementById('articles').getElementsByTagName('p');
// Loop through the links:
for (var i=0;i<contentsLinks.length;i++) {
// Call a function when the links are clicked AND when a highlighted article is clicked:
contentsLinks[i].onclick = highlightTarget;
contentsArticles[i].onclick = addNormalClass;
}
}
window.onload = buildContentsArray;
</script>
<style type="text/css">
.highlighted { background-color:#f90; }
.normal { background-color:transparent; }
</style>
</head>
<body>
<ul id="contents">
<li><a href="#lorem">Lorem</a></li>
<li><a href="#ipsum">Ipsum</a></li>
<li><a href="#dolor">Dolor</a></li>
<li><a href="#sit">Sit</a></li>
</ul>
<div id="articles">
<p id="lorem">Phasellus quis ligula eu lacus congue vulputate.</p>
<p id="ipsum">In hac habitasse platea dictumst. Aenean tempor mattis arcu.</p>
<p id="dolor">Maecenas sit amet turpis. Vivamus ac justo. Fusce in tortor.</p>
<p id="sit">Duis ornare urna et velit. Phasellus vulputate turpis vitae quam.</p>
</div>
</body>
</html>
[code]![[2thumbsup]](/data/assets/smilies/2thumbsup.gif "[2thumbsup] [2thumbsup]")