|
|
Hey great news is ...my code works...but it looks so novice...How could I optimize my code without changing the output. In otherwords, How do I improve my coding practice.Your help is greatly appreciated.
[CODE]
<!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>
<script type="text/javascript">
function SwitchDiv(objId){
var contentDiv1 = document.getElementById("subItem1");
var contentDiv2 = document.getElementById("subItem2");
var contentDiv3 = document.getElementById("subItem3");
var titleDiv1 = document.getElementById("title1");
var titleDiv2 = document.getElementById("title2");
var titleDiv3 = document.getElementById("title3");
if(objId ==1){
contentDiv1.style.display ="block";
contentDiv2.style.display ="none";
contentDiv3.style.display ="none";
titleDiv1.style.color= "#000000";
titleDiv1.style.backgroundColor="#cccccc";
titleDiv2.style.color= "#ffffff";
titleDiv2.style.backgroundColor="#ee00ee";
titleDiv3.style.color= "#ffffff";
titleDiv3.style.backgroundColor="#ee00ee";
}else if(objId ==2){
contentDiv2.style.display ="block";
contentDiv1.style.display ="none";
contentDiv3.style.display ="none";
titleDiv2.style.color= "#000000";
titleDiv2.style.backgroundColor="#cccccc";
titleDiv1.style.color= "#ffffff";
titleDiv1.style.backgroundColor="#ee00ee";
titleDiv3.style.color= "#ffffff";
titleDiv3.style.backgroundColor="#ee00ee";
}else{
contentDiv3.style.display ="block";
contentDiv2.style.display ="none";
contentDiv1.style.display ="none";
titleDiv3.style.color= "#000000";
titleDiv3.style.backgroundColor="#cccccc";
titleDiv2.style.color= "#ffffff";
titleDiv2.style.backgroundColor="#ee00ee";
titleDiv1.style.color= "#ffffff";
titleDiv1.style.backgroundColor="#ee00ee";
}
}
</script>
</head>
<body>
<div id="divContainer">
<div id="title1" style="background-color:#cccccc; color:#000000; width:200px;" onclick="SwitchDiv('1')">Title One</div>
<div id="subItem1" style="display:block">welcome to the first subitem</div>
<div id="title2" style="background-color:#ee00ee; width:200px;" onclick="SwitchDiv('2')">Title Two</div>
<div id="subItem2" style="display:none">welcome to the second subitem</div>
<div id="title3" style="background-color:#ee00ee; width:200px;" onclick="SwitchDiv('3')">Title Three</div>
<div id="subItem3" style="display:none">welcome to the third subitem</div>
</div>
</body>
</html>
[/CODE]
|
|
|
|
|
|
|
|
vusubhashini
