این تب یا سربرگ ها خیلی ساده با با تگ های ul-li ساخته میشن. این کد html رو که از یک div تشکیل شده و درونش تگ های ul-li هستند در نظر بگیرید
1.<div>
2. <ul>
3. <li><a href="#">محبوب ترين مطلب</a></li>
4. <li><a href="#">آخرين مطالب</a></li>
5. <li><a href="#">افراد آنلاين</a></li>
6. <li><a href="#">وضعيت اعضاء</a></li>
7. </ul>
8.</div>
ما میخوایم با css کاری کنیم که هر تگ li بشه یه تب. برای شروع کار کد های زیر رو در فایل css خودتون قرار بدین:
01.#TabContainer
02.{
03. margin: 30px 250px;
04. padding: 0;
05.}
06.#TabContainer .tab
07.{
08. list-style: none;
09. border: 1px solid #000000;
10. margin: 0;
11. padding: 0;
12.}
13.#TabContainer .tab li
14.{
15. float: right;
16. margin-left: 5px;
17.}
در کد های بالا شناسه TabContainer برای نگهداری tab ها در نظر گرفته شده و کلاس tab نیز به تگ ul نسبت داده شده که گزینه های اون واضحه.
برای اینکه هر تگ li به صورت یک تب در بیاد لازم هست که li ها کنار هم قرار بگیرن پس گزینه float:right رو براشون در نظر میگیریم تا به حالت شناور در بین و در سمت راست ul قرار بگیرن. margin-left هم برای ایجاد فاصله بین تب ها در نظر گرفته شده. خوب تا اینجا کارمون به این شکل شده:
اولین اشکالی که به چشم میاد اینه که با float کردن li ها ارتفاع ul صفر شده و مثل یک border بالای li ها قرار گرفته. برای اینکه این حاشیه به پایین li ها بیاد باید padding-bottom به ul بدیم با اینکار ul مثل یه کادر دور تب ها رو میگیره. با توجه به اینکه ما فقط به حاشیه پایینی نیاز داریم پس border رو به border-bottom تغییر بدید.
این رو هم عرض کنم خدمتتون که padding-bottom رو طوری در تگ ul مقدار دهی کنید که دقیقا حاشیه تگ ul روی حاشیه پایینی li ها قرار بگیره. توی این مثال من 21 پیکسل براش در نظر گرفتم. بنابراین کلاس tab رو به این شکل ویرایش کنید:
1.#TabContainer .tab
2.{
3. list-style: none;
4. border-bottom: 1px solid #000000;
5. margin: 0;
6. padding: 0 50px 21px 0;
7.}
حالا میریم سراغ تعیین استایل برای تگ های a که درون li هستند:
01.#TabContainer li a:link,#TabContainer li a:visited
02.{
03. display: block;
04. font-family: tahoma;
05. font-size: .75em;
06. background-color: #fcd9af;
07. color: #800000;
08. border: 1px solid #000;
09. padding: 3px;
10. text-decoration: none;
11.}
12.#TabContainer li a:hover
13.{
14. background-color: #ff9797;
15.}
فکر نمیکنم در کد های بالا چیزی نا مفهوم باشه. فقط اینو بگم که جهت اینکه تگ a به صورت جعبه ای در بیاد خاصیت display اونو برابر block قرار دادم. با این کار تگ a تمام فضای درون li رو میپوشونه و وقتی که موس رو در هر جای li قرار بگیره. علامت دست ظاهر میشه. البته شاید تو این مثال چون اندازه تب ها کوچیکه زیاد این مورد حس نشه. بعد از اون هم کلاس کاذب hover رو برای تغییر رنگ زمینه تگ a هنگام رفتن موس روی اون استایل دهی کردم.
تا اینجا کارمون به این شکل شده که تقریبا تب ها آماده شدن:
برای ساخت قسمتی که آیتم های هر تب درون اون قرار بگیره فقط کافیه از یه div استفاده کنیم. در ابتدای کار تب ها رو درون یه div با آی دی TabContainer قرار دادیم. بنابراین الان تب های ما دقیقا در بین این div مهار شده هستند. پس خیلی راحت با اضافه کردن یک div دیگه به عنوان محل قرار گیری آیتم ها و دادن border به اون می تونیم یه چهارچوب برای تب ها درست کنیم. این کد html ما تا الان به همراه این قسمت به این شکل هست:
01.<div id="TabContainer">
02. <ul class="tab">
03. <li><a href="#">محبوب ترين مطلب</a></li>
04. <li><a href="#">آخرين مطالب</a></li>
05. <li><a href="#">افراد آنلاين</a></li>
06. <li><a href="#">وضعيت اعضاء</a></li>
07. </ul>
08. <div class="ContentArea">
09. <p>test</p>
10. <p>test</p>
11. <p>test</p>
12. <p>test</p>
13. </div>
14.</div>
و این هم کد css این div:
1.#TabContainer .ContentArea
2.{
3. border: 1px solid #000;
4. border-top: none;
5. padding: 3px;
6.}
توجه کنید که border-top رو در کلاس ContentArea حذف میکنیم و به جای اون border-bottom تگ ul جایگزین میشه.
تا اینجا کار ساخت تب ها تمومه. حالا باید قسمتی رو اضافه کنیم که کاربر با کلیک روی یک تب، اون تب به حالت فعال در بیاد و فقط آیتم های همون تب نشون داده بشه.
برای فعال شدن هر تب باید از جاوا اسکریپت استفاده کنیم به طوری که با کلیک روی هر تب تابعی فراخوانی بشه و استایل اون تب رو تغییر بده همچنین آیتم های مربوط به تمام تب ها رو در همون تگ div که کلاس ContentArea رو داره، قرار میدیم و با جاوااسکریپت خاصیت display اونا رو جوری تغییر میدیم که موقع کلیک روی هر تب فقط آیتم های اون تب نشون داده بشن. به این ترتیب برای هر کدوم از تگ های a یک آی دی در نظر میگیریم و به رویداد onclick هر یک نیز نام تابع جاوا اسکریپت مورد نظر رو اختصاص میدیم.
1.<li><a href="#" id="MostVisited" class="active" onclick="tabselect(id);">محبوب ترین مطالب</a></li>
2.<li><a href="#" id="LastContent" onclick="tabselect(id);">آخرین مطالب</a></li>
3.<li><a href="#" id="OnlineUsers" onclick="tabselect(id);">افراد آنلاین</a></li>
4.<li><a href="#" id="UsersStatus" onclick="tabselect(id);">وضعیت اعضاء</a></li>
همچنین به div نگهدارنده آیتم ها هم چند تگ div دیگه که هرکدوم مربوط به یک تب هستند رو به عنوان آیتم هایی که باید درون هر تب نمایش داده بشن، اضافه کردم:
01.<div class="ContentArea">
02. <div id="MostVisited_content">
03. most visited
04. </div>
05. <div id="LastContent_content">
06. last content
07. </div>
08. <div id="OnlineUsers_content">
09. online user
10. </div>
11. <div id="UsersStatus_content">
12. user status
13. </div>
14.</div>
با توجه به اینکه باید تب فعال ما دارای استایل متفاوتی نسبت به تب های دیگه داشته باشه من یک کلاس css با نام active رو برای تب های فعال در نظر گرفتم:
1.#TabContainer .tab a.active , #TabContainer .tab a.active:hover
2.{
3. background-color: #ffffff;
4. border-bottom: 1px solid #ffffff;
5.}
توی این کلاس فقط لازمه رنگ زمینه اون تب و حاشیه پایینی اون رو همرنگ با رنگ زمینه آیتم ها کنیم. در کد های html ئی که بالاتر قرار دادم به اولین تب این کلاس رو نسبت دادم. همچنین چون قبلا برای کلاس hover استایل تعیین کرده بودیم، باید اونو نیز override کنیم تا با رفتن موس روی اون رنگ زمینه تب عوض نشه. بنابراین الان چنین شکلی رو داریم:
حالا فقط میمونه تابع جاوا اسکریپتی که باید برای تغییر دادن استایل تب ها بنویسیم:
من خیلی ساده این تابع رو به این شکل نوشتم:
01.var activeId = "MostVisited";
02.function tabselect(id)
03.{
04. document.getElementById(activeId).className="";
05. document.getElementById(id).className="active";
06. document.getElementById(id).blur();
07.
08. document.getElementById(activeId + "_content").style.display="none";
09. document.getElementById(id + "_content").style.display="";
10. activeId = id;
11.}
با کلیک بر روی یک تب، آی دی اون تب به این تابع پاس داده میشه و طبق اون آی دی، خاصیت display و className آیتم ها و تگ های a تعیین میشه.
یکه نکته کوچکی باقی میمونه و اونم اینکه وقتی صفحه لود میشه به دلیل اینکه این تابع جاوا اسکریپت فراخوانی نشده همه آیتم های تب ها با هم دیگه نشون داده میشن. برای رفع این مورد به div تک تک آیتم ها به غیر از آیتم اول style="display: none;" اضافه میکنیم که در زمان لود صفحه نشون داده نشن:
01.<div class="ContentArea">
02. <div id="MostVisited_content">
03. most visited
04. </div>
05. <div id="LastContent_content" style="display: none;">
06. last content
07. </div>
08. <div id="OnlineUsers_content" style="display: none;">
09. online user
10. </div>
11. <div id="UsersStatus_content" style="display: none;">
12. user status
13. </div>
14.</div>
