چگونگی ساخت تب (سربرگ) با CSS

این تب یا سربرگ ها به سادگی توسط تگ های ul-li ساخته می شوند. برای شروع، کد html زیر را که از یک div تشکیل شده و درونش تگ های ul-li هستند در نظر بگیرید:

<div id="TabContainer">
    <ul class="tab">
        <li><a href="#">محبوب ترين مطلب</a></li>
        <li><a href="#">آخرين مطالب</a></li>
        <li><a href="#">افراد آنلاين</a></li>
        <li><a href="#">وضعيت اعضاء</a></li>
    </ul>
</div>

قصد بر این است که با css کاری کنیم که هر تگ li به یک تب تبدیل شود، بنابراین کد های زیر را در فایل css خود قرار دهید:

#TabContainer
{
    margin: 30px 250px;
    padding: 0;
}
#TabContainer ul.tab
{
    list-style: none;
    border: 1px solid #000000;
    margin: 0;
    padding: 0;
}
#TabContainer ul.tab li
{
    float: right;
    margin-left: 5px;
}

در کد های بالا شناسه TabContainer برای نگهداری tab ها در نظر گرفته شده است و کلاس tab نیز به تگ ul نسبت داده شده که گزینه های آن واضح اند.
برای اینکه هر تگ li به صورت به یک تب تبدیل شود، لازم هست که li ها کنار هم قرار بگیرند، بنابراین خاصیت float:right  را برای تگ های li در نظر می گیریم تا به حالت شناور و در سمت راست ul قرار بگیرند. margin-left نیز برای ایجاد فاصله بین تب ها در نظر گرفته شده است. خوب تا اینجا کار به این شکل شده:

اولین مشکلی که دیده می شود این است که با float کردن li ها ارتفاع ul صفر شده و مثل یک border در بالای li ها قرار گرفته است. برای اینکه این حاشیه در زیر تگ های li قرار گیرد، لازم است که مقداری برایpadding-bottom  تگ ul در نظر بگیریم، با اینکار ul مثل کادری دور تب ها را خواهد گرفت. با توجه به اینکه ما فقط به حاشیه پایینی نیاز داریم پس border را بهborder-bottom  تغییر دهید.
این را هم عرض کنم که padding-bottom را طوری در تگ ul مقدار دهی کنید که دقیقا حاشیه تگ ul روی حاشیه پایینی li ها قرار بگیرد. در این مثال من مقدار21 پیکسل برایpadding-bottom  در نظر گرفتم. در نهایت کلاس tab را به این شکل ویرایش کنید:

#TabContainer ul.tab
{
    list-style: none;
    border-bottom: 1px solid #000000;
    margin:  0;
    padding: 0 50px 21px 0;
}

بعد از انجام مراحل فوق به سراغ تعیین استایل برای تگ های a که درون تگ های li هستند می رویم:

#TabContainer li a:link,#TabContainer li a:visited
{
    display: block;
    font-family: tahoma;
    font-size: .75em;
    background-color: #fcd9af;
    color: #800000;
    border: 1px solid #000;
    padding: 3px;
    text-decoration: none;
}
#TabContainer li a:hover
{
    background-color: #ff9797;
}

فکر نمیکنم در کد های بالا چیزی نامفهوم باشد. فقط یک نکته کوچک اینکه به منظور نمایش تگ a به صورت جعبه ای، خاصیت display آن را برابر block قرار دادم.  با این کار تگ a تمام فضای درون li را می پوشاند و وقتی موس را در هر جای li قرار دهید، علامت دست ظاهر خواهد شد. بعد از آن هم کلاس کاذب hover را برای تغییر رنگ زمینه تگ a هنگام رفتن موس بر روی تگ، استایل دهی کردم.
تا اینجا تب های ما به این شکل شده که تقریبا تب ها آماده شده اند:

برای ساخت قسمتی که آیتم های هر تب درون آن قرار گیرد از یک تگ div  استفاده می کنیم. در ابتدای کار تب ها را درون یک div  با آی دی TabContainer  قرار دادیم. بنابراین تب های ما دقیقا در بین این div مهار شده هستند. پس خیلی راحت با اضافه کردن یک div دیگر به عنوان محل قرار گیری آیتم ها و دادن border به آن می توانیم یک چهارچوب برای تب ها درست کنیم. کد html ما تا این لحظه به صورت زیر می باشد:

 <div id="TabContainer">
    <ul class="tab">
        <li><a href="#">محبوب ترين مطلب</a></li>
        <li><a href="#">آخرين مطالب</a></li>
        <li><a href="#">افراد آنلاين</a></li>
        <li><a href="#">وضعيت اعضاء</a></li>
    </ul>
    <div class="ContentArea">
        <p>test</p>
        <p>test</p>
        <p>test</p>
        <p>test</p>
    </div>
</div>

و این هم کد css برای div جدید:

#TabContainer div.ContentArea
{
    border: 1px solid #000;
    border-top: none;
    padding: 3px;
}

توجه کنید که border-bottom  تگul ، حاشیه بالایی در کلاس ContentArea  را تشکیل می دهد، بنابراین مقدار border-top را در این کلاس حذف کرده ایم.
تا اینجا کار ساخت تب ها به پایان رسیده است. در ادامه باید حالت فعال یا غیر فعال بودن تب ها را ایجاد کنیم، به شکلی که وقتی کاربر بر روی یک تب کلیک کرد، آن تب به حالت فعال در بیاید و فقط آیتم های همان تب نشان داده شود.

<li><a href="#" id="MostVisited" class="active" onclick="tabselect(id);">محبوب ترین مطالب</a></li>
<li><a href="#" id="LastContent" onclick="tabselect(id);">آخرین مطالب</a></li>
<li><a href="#" id="OnlineUsers" onclick="tabselect(id);">افراد آنلاین</a></li>
<li><a href="#" id="UsersStatus" onclick="tabselect(id);">وضعیت اعضاء</a></li>

به div نگهدارنده آیتم ها هم چند تگ div که هرکدام مربوط به آیتم های یک تب هستند را اضافه کنید:

<div class="ContentArea">
    <div id="MostVisited_content">
        most visited
    </div>
    <div id="LastContent_content">
        last content
    </div>
    <div id="OnlineUsers_content">
        online user
    </div>
    <div id="UsersStatus_content">
        user status
    </div>
</div>

با توجه به اینکه تب فعال ما باید دارای استایل متفاوتی نسبت به سایر تب ها باشد، یک کلاس css با نام active را برای تب های فعال نیزدر نظر می گیریم:

#TabContainer ul.tab a.active , #TabContainer ul.tab a.active:hover
{
    background-color: #ffffff;
    border-bottom: 1px solid #ffffff;
}

در این کلاس فقط رنگ زمینه تب فعال و حاشیه پایینی آن را همرنگ با رنگ زمینه آیتم ها کنیم. در کد های html ئی که بالاتر قرار دادم به اولین تب، این کلاس رو نسبت دادم. همچنین چون قبلا برای کلاس hover استایل تعیین کرده بودیم، باید آن را نیزoverride  کنیم تا با رفتن موس روی تب فعال رنگ زمینه تب تغییر پیدا نکند. بنابراین چنین شکلی رو داریم:

درنهایت تابع جاوا اسکریپت برای تغییر دادن استایل تب ها ها را به صورت کاملا ساده به این شکل نوشتم:

var activeId = "MostVisited";
function tabselect(id)
{   
    document.getElementById(activeId).className="";
    document.getElementById(id).className="active";
    document.getElementById(id).blur();
    
    document.getElementById(activeId + "_content").style.display="none";
    document.getElementById(id + "_content").style.display="";
    activeId = id;
}