Forum Moderators: open
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language=javascript type='text/javascript'>
function showDiv(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.visibility="visible";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'visible';
else // IE 4
document.all.divs[i].visibility = 'visible';
} else {
if (document.getElementById)
divs[i].style.visibility="hidden";
else
if (document.layers) // Netscape 4
document.divs[i].visibility = 'hidden';
else // IE 4
document.all.divs[i].visibility = 'hidden';
}
}
}
</script>
</head>
<body>
<a href="javascript:showDiv('F256')">Home</a>
<a href="javascript:showDiv('F512')"> About Us</a>
<div id="F2561" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000; visibility: hidden">
Home
</div>
<div id="F512" style="position: absolute; left:5px; top:54px; background-color: #0093DD; border: 1px none #000000" >
About Us
</div>
</body>
</html>
[edited by: Fotiman at 12:40 am (utc) on May 11, 2010]
[edit reason] No URLs please. See Terms of Service [webmasterworld.com] [/edit]
function showDiv(pass) {
state = document.getElementById(pass).style.visibility;
if (state == 'visible') {
document.getElementById(pass).style.visibility = 'hidden';
} else {
document.getElementById(pass).style.visibility = 'visible';
} // endif
} // end showDIV()
function showDiv(pass) {
// make sure it exists to avoid JS errors
if (document.getElementById(pass)) {
var obj = document.getElementById(pass);
obj.style.display = (obj.style.display=='block')?'none':'block';
}
return false;
}
after clicking a link
window.onload=function() {
if (document.getElementById('id-of-div')) {
document.getElementById('id-of-div').style.display="none";
}
};
Javascript:void() is not a valid URL.
href = uri [CT]
This attribute specifies the location of a Web resource, thus defining a link between the current element (the source anchor) and the destination anchor defined by this attribute.
<a href="#F2561">Home</a>
<a href="#F512">About Us</a>
<div id="F2561">
Home
</div>
<div id="F512">
About Us
</div>
<html>
<head>
<style type="text/css">
#F2561,
#F512 {
background-color: #0093DD;
border: 1px none #000000;
}
.selectedBlock {
position: absolute;
left:5px;
top:54px;
}
.hidden {
display: none;
}
</style>
<title>Test</title>
</head>
<body>
<a href="#F2561" id="homeLink">Home</a>
<a href="#F512" id="aboutUsLink">About Us</a>
<div id="F2561">
Home
</div>
<div id="F512">
About Us
</div>
<script type="text/javascript">
(function () {
var blockIds = [], // the ids of blocks to show/hide
i, // counter for iterating through links
elLink, // temp element reference (attaching handler)
linkIds = ['homeLink', 'aboutUsLink'], // ids of links to attach to
n; // counter for iterating through links
/**
* Hide the blocks represented by the blockIds array, except for the one
* that matches the passed in id.
* @param {string} id The id of the block to remain visible
*/
function showBlock(id) {
var c, // the value of the class name to set
el, // the element to set the class on
i, // counter for iterating through blocks
n; // counter for iterating through blocks
for (i = 0, n = blockIds.length; i < n; i++) {
c = (blockIds[i] === id? 'selectedBlock': 'hidden');
el = document.getElementById(blockIds[i]);
// set class and className for older IE support
el.setAttribute('className', c);
el.setAttribute('class', c);
}
}
// iterate through the links, create the blockIds array,
// and assign onclick handlers to each link
for (i = 0, n = linkIds.length; i < n; i++) {
elLink = document.getElementById(linkIds[i]);
blockIds[i] = (elLink.hash).substr(1);
elLink.onclick = (function (bid) {
return function () {
showBlock(bid);
return false;
}
})(blockIds[i]);
}
// Default to showing the block linked by the first link
showBlock(blockIds[0]);
})();
</script>
</body>
</html>
