sugoj,
вот если угодно простейший пример
<!DOCTYPE html>
<html><head>
<meta charset = "utf-8" />
<style type = "text/css">
*{
margin: 0px;
padding: 0px;
font-size: 8pt;
}
.wrapper{
width: 100px;
border: 1px solid gray;
margin: 0px auto;
}
.tabs{
line-height: 2em;
}
.tab{
padding: 0px 5px;
cursor: pointer;
display: inline-block;
}
.fb{
background-color: #5af;
color: #fff;
}
.tw{
color: #def;
background-color: #8cf;
}
.chat{
background-color: #fff;
}
.widget{
height: 200px;
position: relative;
}
.widget .fb, .widget .tw, .widget .chat{
position: absolute;
width: 100%;
height: 100%;
left:0px;
top: 0px;
}
</style>
</head><body>
<div class = "wrapper">
<div class = "tabs">
<div id = "#tab_tw" class = "tab tw">twitter</div><div id = "#tab_fb" class = "tab fb">fb</div><div id = "#tab_chat" class = "tab chat">чат</div>
</div>
<div class = "widget" id = "#IDDDD">
<div class = "fb" id = "#wid_fb">facebook widget</div>
<div class = "tw"id = "#wid_tw">twitter widget</div>
<div class = "chat" id = "#wid_chat">my chat</div>
</div>
</div>
</body></html>
<script type = "text/javascript">
(function(){
function $(id){
return document.getElementById(id);
}
function placeTop(id){
return function(){
var elem = $(id);
elem.parentNode.appendChild(elem);
}
}
$("#tab_tw").onclick = placeTop("#wid_tw");
$("#tab_fb").onclick = placeTop("#wid_fb");
$("#tab_chat").onclick = placeTop("#wid_chat");
}())
</script>