<style id="tab2-css-code">
/*--------------------------------------------------- TABS 2 */
div.TabView2 div.Tabs2 {
height:30px;
margin-top:30px;
overflow: hidden;
}
div.TabView2 div.Tabs2 a {
float: left;
display: block;
width: 78px;
text-align: center;
padding: 6px 0px 6px;
border: 1px solid #333333;
background-color: #000000;
color: #CCCCCC;
}
div.TabView2 div.Tabs2 a:hover {
background-color: #111111;
border:1px solid #666666;
text-decoration:none;
}
div.TabView2 div.Tabs2 a.Active {
background-color: #111111;
border-top:1px solid #333333;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #111111;
}
div.TabView2 div.Pages {
clear: both;
background-color: #111111;
border-left:1px solid #333333;
border-right:1px solid #333333;
border-bottom:1px solid #333333;
padding: 0px 0px 10px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page {
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView2 div.Pages div.Page div.Pad {
padding: 0px 0px;
}
</style>
Adım-2: Javascript Doslayalarını Siteye Ekle
<script type="text/javascript">
function tabview2_aux(TabView2Id, id)
{
var TabView2 = document.getElementById(TabView2Id);
// ----- Tabs -----
var Tabs2 = TabView2.firstChild;
while (Tabs2.className != "Tabs2" ) Tabs2 = Tabs2.nextSibling;
var Tab2 = Tabs2.firstChild;
var i = 0;
do
{
if (Tab2.tagName == "A")
{
i++;
Tab2.href = "javascript:tabview2_switch('"+TabView2Id+"', "+i+");";
Tab2.className = (i == id) ? "Active" : "";
Tab2.blur();
}
}
while (Tab2 = Tab2.nextSibling);
// ----- Pages -----
var Pages = TabView2.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);
}
// ----- Functions -----
function tabview2_switch(TabView2Id, id) { tabview2_aux(TabView2Id, id); }
function tabview2_initialize(TabView2Id) { tabview2_aux(TabView2Id, 1); }
</script>
Adım-3: Html Kodlarını Sitene Ekle
<div class="TabView2" id="TabView2">
<div class="Tabs2" style="width: 420px;">
<a><b>Tab1</b></a>
<a><b>Tab2</b></a>
<a><b>Tab3</b></a>
<a><b>Tab4</b></a>
<a><b>Tab5</b></a>
</div>
<div class="Pages" style="height: 2200px; width: 420px;">
<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT1</div>
</div>
<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT2</div>
</div>
<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT3</div>
</div>
<div class="Page">
<div class="Pad"><br />
YOUR CODE-CONTENT4</div>
</div>
<div class="Page">
<div class="Pad">
<b>
<br />
YOUR CODE-CONTENT5
</b>
</div>
</div>
</div></div>
Adım-4: Yine tüm html kodların bitiminden sonra JavaScript kodlaırnı yapıştırın
<script type="text/javascript">
tabview2_initialize('TabView2');
</script>
Kayıtlar
