Tạo tabs sử dụng jquery

Chèn thư viện jquery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js'></script>

 <script src='http://code.jquery.com/ui/1.8.23/jquery-ui.min.js'></script>

 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" />

Cấu trúc dữ liệu cho tabs bằng html:

<div id="tabs">

   <ul>

    <li><a href="#tabs-1">Công dụng</a></li>

    <li><a href="#tabs-2">Chi tiết</a></li>

    <li><a href="#tabs-3">Video</a></li>

   </ul>

   <div id="tabs-1">

    A

   </div>

   <div id="tabs-2">

    B

   </div>

   <div id="tabs-3">

    C

   </div>

  </div>

Cuối cùng khởi tạo tabs, sử dụng jquery:

<script>

 $(function() {

  $( "#tabs" ).tabs();

 });

</script>

Giờ hãy xem kết quả nhé.

• Công dụng
• Chi tiết
• Video

A

B

C