สร้างเมนูแท็บ Tab menu ด้วย jQuery + CSS อย่างง่าย

เขียนเมื่อ 16 ปีก่อน โดย Ninenik Narkdee
css tab jquery

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ css tab jquery

ดูแล้ว 67,876 ครั้ง


ตัวอย่างผลลัพธ์
 



  • Detail Data1
  • Detail Data2
  • Detail Data3
  • Detail Data4
  • Detail Data5


CSS Code ตัวอย่าง

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<style type="text/css">
body{
    margin:0;
    padding:0; 
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
}
div#i_containTab{
    position:relative;
    display:block;
    width:540px; /* กำหนดความกว้างทั้งหมด   */
    border:1px solid #CCC;
}
ul#navi_containTab{
    list-style:none;
    padding:0;
    margin:0;  
    width:100%;
    background-color:#FCF;
}
ul#navi_containTab li{
    display:block;
    float:left;
    height:30px;   
    width:100px;  /* กำหนดความกว้างทั้งหมด  หารด้วยจำนวนเมนูแท็บ  */
    border:0px solid #CCC;
    line-height:25px;
    cursor:pointer;
    text-align:center;
}
/* class รูปแบบของแต่ละเมนู */
.tabNavi1{
    background-color:#9C3; 
}
.tabNavi2{
    background-color:#C93;     
}
.tabNavi3{
    background-color:#FC9;     
}
.tabNavi4{
    background-color:#C9F;     
}
.tabNavi5{
    background-color:#F93;     
}
 
ul#detail_containTab{
    list-style:none;
    padding:0;
    margin:0;  
    width:100%;
}
ul#detail_containTab li{
    float:left;
    width:100%;
    height:150px;  
}
/* class รูปแบบของแต่ละเนื้อหา */
.detailContent1{
    background-color:#9C3; 
    display:block;
}
.detailContent2{
    background-color:#C93;     
    display:none;
}
.detailContent3{
    background-color:#FC9; 
    display:none;  
}
.detailContent4{
    background-color:#C9F;     
    display:none;
}
.detailContent5{
    background-color:#F93;     
    display:none;
}
</style>

HTML Code ตัวอย่าง
 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div id="i_containTab">
    <ul id="navi_containTab">
        <li class="tabNavi1">Tab Menu 1</li>
        <li class="tabNavi2">Tab Menu 2</li>
        <li class="tabNavi3">Tab Menu 3</li>
        <li class="tabNavi4">Tab Menu 4</li>
        <li class="tabNavi5">Tab Menu 5</li>
    </ul>
    <ul id="detail_containTab">
        <li class="detailContent1">Detail Data1</li>
        <li class="detailContent2">Detail Data2</li>
        <li class="detailContent3">Detail Data3</li>
        <li class="detailContent4">Detail Data4</li>
        <li class="detailContent5">Detail Data5</li>
    </ul>
</div>

Javascript Code ตัวอย่าง
 

1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("ul#navi_containTab > li").click(function(event){
            var menuIndex=$(this).index();
            $("ul#detail_containTab > li:visible").hide();          
            $("ul#detail_containTab > li").eq(menuIndex).show();
    });
});
</script>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: css tab jquery







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ