Loading data........
Tin nhanh :
Xem Tivi Online

Tổng hợp các kênh giải trí (Đang cập nhật chức năng..)

New Update

Truyền hình SCTV

SCTV14

SCTV15

SCTV16

SCTV17

SCTV18 HD

Vietnam Channels

VTV1

VTV2

VTV3

VTV4

VTV6

VTV9

VTC Online

VTC1

VTC2

VTC3

VTC4

VTC5

VTC6

VTC Online

VTC7

VTC8

VTC9

VTC10

VTC11

VTC12

Truyền hình tp HCM

HTV1

HTV2

HTV3

HTV4

HTV7

HTV9

Radio Channels

VOV1

VOV2

VOV3

VOV4

VOV5

VOV GT-HN

Home » » Tạo tab sử dụng jquery

Tạo tab sử dụng jquery

 

Demo_tab_love4all1080

Trong bài này sẽ giới thiệu cho các bạn tạo 1 Tab Menu sử dụng JQuery 1 cách dễ dàng đơn giản & nhanh nhất

Link xem DEMO

Bên dưới là đầy toàn bộ code hướng dẫn của bài này.

Step 1: tạo 1 file html với nội dung

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Demo Tab using JQuery</title>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />    
  
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
</head>

<body>
<div id="tabbed_box_1" class="tabbed_box">
    <h4>Browse Site <small>Select a Tab</small></h4>
    <div class="tabbed_area">
    
        
        <ul class="tabs">
            <li><a href="#" title="content_1" class="tab active">Topics</a></li>
            <li><a href="#" title="content_2" class="tab">Archives</a></li>
            <li><a href="#" title="content_3" class="tab">Pages</a></li>
        </ul>
        
        <div id="content_1" class="content">
            <ul>
                <li><a href="">HTML Techniques <small>4 Posts</small></a></li>
                <li><a href="">CSS Styling <small>32 Posts</small></a></li>
                <li><a href="">Flash Tutorials <small>2 Posts</small></a></li>
                <li><a href="">Web Miscellanea <small>19 Posts</small></a></li>
                <li><a href="">Site News <small>6 Posts</small></a></li>
                <li><a href="">Web Development <small>8 Posts</small></a></li>
            </ul>
        </div>
        <div id="content_2" class="content">
            <ul>
                <li><a href="">December 2008 <small>6 Posts</small></a></li>
                <li><a href="">November 2008 <small>4 Posts</small></a></li>
                <li><a href="">October 2008 <small>22 Posts</small></a></li>
                <li><a href="">September 2008 <small>12 Posts</small></a></li>
                <li><a href="">August 2008 <small>3 Posts</small></a></li>
                <li><a href="">July 2008 <small>1 Posts</small></a></li>
            </ul>
        </div>
        <div id="content_3" class="content">
            <ul>
                <li><a href="">Home</a></li>
                <li><a href="">About</a></li>
                <li><a href="">Contribute</a></li>
                <li><a href="">Contact</a></li>
            </ul>
        </div>
    
    </div>

</div>


</body>
</html>

Step 2: Nội dung file CSS (style.css)

body {
    background-image:url(images/background.jpg);
    background-repeat:no-repeat;
    background-position:top center;
    background-color:#657077;
    margin:40px;
}

#tabbed_box_1 {
    margin: 0px auto 0px auto;
    width:300px;
}
.tabbed_box h4 {
    font-family:Arial, Helvetica, sans-serif;
    font-size:23px;
    color:#ffffff;
    letter-spacing:-1px;
    margin-bottom:10px;
}
.tabbed_box h4 small {
    color:#e3e9ec;
    font-weight:normal;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    text-transform:uppercase;
    position:relative;
    top:-4px;
    left:6px;
    letter-spacing:0px;
}
.tabbed_area {
    border:1px solid #494e52;
    background-color:#636d76;
    padding:8px;    
}

ul.tabs {
    margin:0px; padding:0px;
    margin-top:5px;
    margin-bottom:6px;
}
ul.tabs li {
    list-style:none;
    display:inline;
}
ul.tabs li a {
    background-color:#464c54;
    color:#ffebb5;
    padding:8px 14px 8px 14px;
    text-decoration:none;
    font-size:9px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    border:1px solid #464c54;
    background-image:url(images/tab_off.jpg);
    background-repeat:repeat-x;     
    background-position:bottom;
}
ul.tabs li a:hover {
    background-color:#2f343a;
    border-color:#2f343a;
}
ul.tabs li a.active {
    background-color:#ffffff;
    color:#282e32;
    border:1px solid #464c54; 
    border-bottom: 1px solid #ffffff;
    background-image:url(images/tab_on.jpg);
    background-repeat:repeat-x;
    background-position:top;    
}
.content {
    background-color:#ffffff;
    padding:10px;
    border:1px solid #464c54;     
    font-family:Arial, Helvetica, sans-serif;
    background-image:url(images/content_bottom.jpg);
    background-repeat:repeat-x;     
    background-position:bottom;    
}
#content_2, #content_3 { display:none; }

.content ul {
    margin:0px;
    padding:0px 20px 0px 20px;
}
.content ul li {
    list-style:none;
    border-bottom:1px solid #d6dde0;
    padding-top:15px;
    padding-bottom:15px;
    font-size:13px;
}
.content ul li:last-child {
    border-bottom:none;
}
.content ul li a {
    text-decoration:none;
    color:#3e4346;
}
.content ul li a small {
    color:#8b959c;
    font-size:9px;
    text-transform:uppercase;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    position:relative;
    left:4px;
    top:0px;
}
.content ul li a:hover {
    color:#a59c83;
}
.content ul li a:hover small {
    color:#baae8e;
}

Chú ý: đường dẫn file ảnh bạn có thể tải về tại link Demo bên trên

Step 3: Thêm đoạn JQuery code dưới vào trên thẻ </head>

<script>
    
      // When the document loads do everything inside here ...
      $(document).ready(function(){
        
        // When a link is clicked
        $("a.tab").click(function () {
            
            
            // switch all tabs off
            $(".active").removeClass("active");
            
            // switch this tab on
            $(this).addClass("active");
            
            // slide all content up
            $(".content").slideUp();
            
            // slide this content up
            var content_show = $(this).attr("title");
            $("#"+content_show).slideDown();
          
        });
    
      });
  </script>

Done  Punch

Like và chia sẻ với bạn bè :

3 comments:

  1. A very well-written post. I read and liked the post and have also bookmarked you. All the best for future endeavors
    IT Company India

    ReplyDelete
  2. Thanks for visiting my blog, if you don't understand my country language, in the next time i will writing in English ,lol. If you are confused with any trouble in programming, tell me so i can post one tips with clear example :)

    ReplyDelete
  3. This comment has been removed by a blog administrator.

    ReplyDelete

Bạn có ý kiến thắc mắc hay bình luận gì về bài viết này vui lòng để lại lời nhắn.Cám ơn bạn đã ghé thăm !

 
Proudly powered by Blogger
Copyright © 2009-. The Color Of Life - All Rights Reserved