Hi to all,
I am new to javascript and actually quite desperate by now
I have an HTML file that:
a. gets data from an XML file and displays them in various divs (e.g. <div class=‘box’ id=‘b0’> )
b. these divs are hidden (by default) by a class name (class=‘box’)
c. when a link is clicked, I pass the ‘href’ to the function showContent, remove the #, and then look for an element with that ID in the document.
d. then I add a new class name (‘show’) - so that this element shows up!
If you run the code you will see that every time you click on a link a new div is displayed…
So current problems:
a. replace already shown divs with the new clicked ID so that only one div shows up every time.
b. How can I avoid inserting the onClick event in every single <a href> tag - and make this more automated?
My code is as follows:
function showContent(obj)
{
var linkTo = obj.getAttribute("href");
var newlinkTo=linkTo.replace('#','');
//alert (newlinkTo);
document.getElementById(newlinkTo).innerHTML=" This is where the xml variable content should go";
document.getElementById(newlinkTo).className += " Show";
return true;
}
<a href="#b0" onClick="return showContent(this);">
<div id="text_content"> link2 </div>
</a>
<a href="#b1" onClick="return showContent(this);">
<div id="text_content"> link 1 </div>
</a>
<div class='box' id='b0'> abstract content </div>
<div class='box' id='b1'> introduction content </div>
thanks