Question

چگونه می توان فقط با استفاده از CSS تب ایجاد کرد؟

Answer 1

یه مثال جالب که خیلی هم خوب توضیح داده اینجا بود که در ادامه می‌نویسم:

هسته اصلی بر اساس radio inputها (برای انتخاب زبانه) و lableها (برای نمایش خود زبانه) و یک div برای هر کدام است (محتوای تب). نحوه کار هم این طور است که radioها با lable خودشان از طریق id متناظر می‌شوند و divها هم با استفاده از class به radio input مربوط می‌شوند؛ ابتدا همه divها مخفی هستند (display:none) و وقتی یکی از radioها انتخاب شود از طریق انتخاب‌گرهای css،‏ div مربوطه نمایان می‌شود (display:block).

این مثال افقی است نمونه عمودی هم همانجا هست.

HTML:

<div class="tabGroup">
    <input type="radio" name="tabGroup1" id="rad1" class="tab1" checked="checked"/>
    <label for="rad1">Tab 1</label>
 
    <input type="radio" name="tabGroup1" id="rad2" class="tab2"/>
    <label for="rad2">Tab 2</label>
     
    <input type="radio" name="tabGroup1" id="rad3" class="tab3"/>
    <label for="rad3">Tab 3</label>
     
    <br/>
 
    <div class="tab1">Tab 1 content</div>
    <div class="tab2">Tab 2 content</div>
    <div class="tab3">Tab 3 content</div>
</div>

CSS:

/* Set the size and font of the tab widget */
.tabGroup {
    font: 10pt arial, verdana;
    width: 800px;
    height: 400px;
}
 
/* Configure the radio buttons to hide off screen */
.tabGroup > input[type="radio"] {
    position: absolute;
    left:-100px;
    top:-100px;
}
 
/* Configure labels to look like tabs */
.tabGroup > input[type="radio"] + label {
    /* inline-block such that the label can be given dimensions */
    display: inline-block;
 
    /* A nice curved border around the tab */
    border: 1px solid black;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
     
    /* the bottom border is handled by the tab content div */
    border-bottom: 0;
 
    /* Padding around tab text */
    padding: 5px 10px;
 
    /* Set the background color to default gray (non-selected tab) */
    background-color:#ddd;
}
 
/* Focused tabs need to be highlighted as such */
.tabGroup > input[type="radio"]:focus + label {
    border:1px dashed black;
}
 
/* Checked tabs must be white with the bottom border removed */
.tabGroup > input[type="radio"]:checked + label {
    background-color:white;
    font-weight: bold;
    border-bottom: 1px solid white;
    margin-bottom: -1px;
}
 
/* The tab content must fill the widgets size and have a nice border */
.tabGroup > div {
    display: none;
    border: 1px solid black;
    background-color: white;
    padding: 10px 10px;
    height: 100%;
    overflow: auto;
     
    box-shadow: 0 0 20px #444;
    -moz-box-shadow: 0 0 20px #444;
    -webkit-box-shadow: 0 0 20px #444;
     
    border-radius: 0 5px 5px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
}
 
/* This matchs tabs displaying to thier associated radio inputs */
.tab1:checked ~ .tab1, .tab2:checked ~ .tab2, .tab3:checked ~ .tab3 {
    display: block;
}

طبق گفته سازنده با IE9،‏ Firfox 3.6+‎،‏ Opera 11،‏ Chrome و Safari سازگار است.