Jquery Tabs
DOWNLOAD || DEMO
Chuẩn bị :
Chép các thư viện
main.css, jquery-1.2.3.pack.js, jquery.idTabs.min.js vào thư mục chứa site.
Bước 1 : Thêm thư viện vào trang web
Dán đoạn mã sau vào thẻ head
PHP Code:
<link rel="stylesheet" href="main.css" type="text/css" title='main' media="screen" />
<script type="text/javascript" src="jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="jquery.idTabs.min.js"></script>
Bước 2 :
Viết mã html theo cấu trúc như sau:
PHP Code:
<div id="idtab" class="usual">
<ul>
<li><a href="#tab1" class="selected">Tab 1</a></li>
<li><a href="#tab2">Tab 2</a></li>
<li><a href="#tab3">Tab 3</a></li>
</ul>
<div id="tab1">Nội dung tab 1.</div>
<div id="tab2">Nội dung tab 2.</div>
<div id="tab3">Nội dung tab 3.</div>
</div>
Bước 3 : Dùng jquery tác dụng lên mã html ở bước 2
Ngay sau mã html trên, ta dán vào đoạn mã sau:
PHP Code:
<script type="text/javascript">
$("#idtab").idTabs();
</script>
Kết thúc.
