#basket
New messages Members Forum rules Search RSS
  • Page 1 of 1
  • 1
Forum » For webmasters » uCoz » Tabs On Your Forum
Tabs On Your Forum
SirDarknight(Tonmoy)Date: Thursday, 28.04.2011, 20:33 | Message # 1
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Author : jackass


Put The Following Code Where You Want The Tabs To Be Appear :

Code
<style>
.tab_ul {list-style: none; margin:0px 0px 4px 0px;padding:0;}
.tab_ul li {margin-right:1px;}
.on {display:inline; border:1px solid #c2c2c2; border-bottom:0px; padding:5px;color:#000000; background-color:#FFFFFF; }
.off { display:inline; cursor:pointer; border:1px solid #c2c2c2; border-bottom:0px; padding:1px 5px 4px 5px;text-color:#000000; background-color:#ebebeb; color:#999999;}
.content_box_on {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;color:#000000; background-color:#FFFFFF; display:block;}
.content_box_off {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;text-color:#000000; background-color:#FFFFFF; display:none;}
</style>

<ul class="tab_ul">
<li id="tab_1" class="on" onClick="tab_1()">Title of 1. tab</li>
<li id="tab_2" class="off" onClick="tab_2()">Title of 2. tab</li>
<li id="tab_3" class="off" onClick="tab_3()">Title of 3. tab</li>
</ul>

<div class="content_box_on" id="cont1">Content of 1. tab</div>
<div class="content_box_off" id="cont2">Content of 2. tab</div>
<div class="content_box_off" id="cont3">Content of 3. tab</div>

<script type="text/javascript">
function tab_1(){
document.getElementById('cont1').className='content_box_on';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_off';
document.getElementById('tab_1').className='on';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='off';
}
function tab_2(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_on';
document.getElementById('cont3').className='content_box_off';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='on';
document.getElementById('tab_3').className='off';
}
function tab_3(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_on';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='on';
}
</script>

How to edit or add more tabs :

Code
<style>
.tab_ul {list-style: none; margin:0px 0px 4px 0px;padding:0;}
.tab_ul li {margin-right:1px;}
.on {display:inline; border:1px solid #c2c2c2; border-bottom:0px; padding:5px;color:#000000; background-color:#FFFFFF; }
.off { display:inline; cursor:pointer; border:1px solid #c2c2c2; border-bottom:0px; padding:1px 5px 4px 5px;text-color:#000000; background-color:#ebebeb; color:#999999;}
.content_box_on {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;color:#000000; background-color:#FFFFFF; display:block;}
.content_box_off {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;text-color:#000000; background-color:#FFFFFF; display:none;}
</style>

Add more tabs :

Quote
<ul class="tab_ul">
<li id="tab_1" class="on" onClick="tab_1()">Title of 1. tab</li>
<li id="tab_2" class="off" onClick="tab_2()">Title of 2. tab</li>
<li id="tab_3" class="off" onClick="tab_3()">Title of 3. tab</li>
<li id="tab_4" class="off" onClick="tab_4()">Title of 4. tab</li>

<div class="content_box_on" id="cont1">Content of the 1. tab</div>
<div class="content_box_off" id="cont2">Content of the 2. tab</div>
<div class="content_box_off" id="cont3">Content of the 3. tab</div>
<div class="content_box_off" id="cont4">Content of the 4. tab</div>

It's easy, just add new row and change numbers, and title
But it's not all...

Code

function tab_4(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_off';
document.getElementById('cont4').className='content_box_on';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='off';
document.getElementById('tab_4').className='on';
}

You need to add new row here to,

Code

function tab_3(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_on';
document.getElementById('cont4').className='content_box_off';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='on';
document.getElementById('tab_4').className='off';
}


Attachments: 3016363.png (1.3 Kb)

Please Give Me A Reputation or Award If My Post Helps You
 
EnderDate: Sunday, 01.05.2011, 20:15 | Message # 2
Group: Users
Posts: 3
Awards: 0
Status: Offline
so how I use it?, I know where I need to put the code into, but I don't know how to make it work.
 
SirDarknight(Tonmoy)Date: Monday, 02.05.2011, 07:07 | Message # 3
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Quote (Ender)
so how I use it?, I know where I need to put the code into, but I don't know how to make it work.

What do you mean? If You Want to say that you don't where the contents are then read this : http://ucozers.ucoz.com/forum/27-351-1

Please Give Me A Reputation or Award If My Post Helps You
 
EnderDate: Tuesday, 03.05.2011, 08:16 | Message # 4
Group: Users
Posts: 3
Awards: 0
Status: Offline
I mean how to get the tabs work?
 
SirDarknight(Tonmoy)Date: Tuesday, 03.05.2011, 10:34 | Message # 5
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Ender, That depends on what you want to do via the tabs
Please Give Me A Reputation or Award If My Post Helps You
 
EnderDate: Wednesday, 04.05.2011, 05:41 | Message # 6
Group: Users
Posts: 3
Awards: 0
Status: Offline
I want to make it so different tabs.....for example
tab 1 is about general stuff
tab 2 is about computer
tab 3 is about Off topic
every tab shows different sections of the forum. How I do that?
 
SirDarknight(Tonmoy)Date: Wednesday, 04.05.2011, 06:40 | Message # 7
Group: Verified
Posts: 167
Awards: 6
Status: Offline
Quote
<style>
.tab_ul {list-style: none; margin:0px 0px 4px 0px;padding:0;}
.tab_ul li {margin-right:1px;}
.on {display:inline; border:1px solid #c2c2c2; border-bottom:0px; padding:5px;color:#000000; background-color:#FFFFFF; }
.off { display:inline; cursor:pointer; border:1px solid #c2c2c2; border-bottom:0px; padding:1px 5px 4px 5px;text-color:#000000; background-color:#ebebeb; color:#999999;}
.content_box_on {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;color:#000000; background-color:#FFFFFF; display:block;}
.content_box_off {padding: 10px; margin-bottom:10px; border:1px solid #c2c2c2;text-color:#000000; background-color:#FFFFFF; display:none;}
</style>

<ul class="tab_ul">
<li id="tab_1" class="on" onClick="tab_1()">General Stuff</li>
<li id="tab_2" class="off" onClick="tab_2()">Computer</li>
<li id="tab_3" class="off" onClick="tab_3()">Off-Topic</li>
</ul>

<div class="content_box_on" id="cont1">Content of 1. tab</div>
<div class="content_box_off" id="cont2">Content of 2. tab</div>
<div class="content_box_off" id="cont3">Content of 3. tab</div>

<script type="text/javascript">
function tab_1(){
document.getElementById('cont1').className='content_box_on';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_off';
document.getElementById('tab_1').className='on';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='off';
}
function tab_2(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_on';
document.getElementById('cont3').className='content_box_off';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='on';
document.getElementById('tab_3').className='off';
}
function tab_3(){
document.getElementById('cont1').className='content_box_off';
document.getElementById('cont2').className='content_box_off';
document.getElementById('cont3').className='content_box_on';
document.getElementById('tab_1').className='off';
document.getElementById('tab_2').className='off';
document.getElementById('tab_3').className='on';
}
</script>

Edit the red and blue colors.

Please Give Me A Reputation or Award If My Post Helps You
 
Forum » For webmasters » uCoz » Tabs On Your Forum
  • Page 1 of 1
  • 1
Search: