Tab widget

Last Posts Events-News Games

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3

...........................

<div dir="ltr" style="text-align: left;" trbidi="on">

<script type="text/javascript">

 

function tabview_aux(TabViewId, id) 

{ 

  var TabView = document.getElementById(TabViewId); 

  var Tabs = TabView.firstChild; 

  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling; 

  var Tab = Tabs.firstChild; 

  var i   = 0; 

  do 

  { 

    if (Tab.tagName == "A") 

    { 

      i++; 

      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");"; 

      Tab.className = (i == id) ? "Active" : ""; 

      Tab.blur(); 

    } 

  } 

  while (Tab = Tab.nextSibling); 

  var Pages = TabView.firstChild; 

  while (Pages.className != 'Pages') Pages = Pages.nextSibling; 

  var Page = Pages.firstChild; 

  var i    = 0; 

  do 

  { 

    if (Page.className == 'Page') 

    { 

      i++; 

      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px"; 

      Page.style.overflow = "auto"; 

      Page.style.display  = (i == id) ? 'block' : 'none'; 

    } 

  } 

  while (Page = Page.nextSibling); 

} 

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); } 

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); } 

</script> 

<style type="text/css">

 

div.TabView div.Tabs 

{ 

    height: 24px; 

    overflow: hidden; 

} 

div.TabView div.Tabs a 

{ 

    float: left; 

    display: block; 

    width:  90px; 

    text-align: center; 

    height: 24px; 

    padding-top: 3px; 

    vertical-align: middle; 

    border: 1px solid black;     border-bottom-width: 0; 

    text-decoration: none; 

    font-family: "Arial", Serif; 

    font-weight: 900; 

   color: #000000; } 

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active 

{ 

    background-color:#404040; 

    color: #ffffff; } 

div.TabView div.Pages 

{ 

    clear: both; 

    border: 1px solid #404040;     overflow: hidden; 

} 

div.TabView div.Pages div.Page 

{ 

    height: 100%; 

    padding: 0px; 

    overflow: hidden; 

} 

div.TabView div.Pages div.Page div.Pad 

{ 

    padding: 3px 5px; 

} 

</style> 

<br />

<form action="tabview.html" method="get">

<div class="TabView" id="TabView">

<div class="Tabs" style="width: 310px;">

<a href="http://www.blogger.com/blogger.g?blogID=7269508886652670155">Last Posts</a> <a href="http://www.blogger.com/blogger.g?blogID=7269508886652670155">Events-News</a> <a href="http://www.blogger.com/blogger.g?blogID=7269508886652670155">Games</a> </div>

<div class="Pages" style="height: 250px; width: 310px;">

<div class="Page">

<div class="Pad">

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 1

</div>

</div>

<div class="Page">

<div class="Pad">

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 2 

</div>

</div>

<div class="Page">

<div class="Pad">

ΕΔΩ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥ ΤΑΒ 3 

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

 

    tabview_initialize('TabView'); 

</script></div>