• fans
  • 1036 reader
  • followers
Tabbed Navigation với jQuery & CSS
  • Tutorial Details
  • Độ khó: Trung Bình
  • Thời gian: 35:05 phút
  • File size: 73.59 MB
  • Yêu cầu: Căn bản HTML & CSS

Tabbed Navigation ngày càng trở nên phổ biến khi mà các designer ngày càng muốn tận dụng từng centimet trên màn hình. Trước đây trang web chỉ đơn giản là banner, nội dung và một ít sidebar. Thì bây giờ trang web phải có đủ thứ phải trình trên trang chủ. Nhưng diện tích chiều ngang thì có hạn do vậy Tabbed Navigation là lựa chọn tốt nhất để tiết kiệm diện tích chiều ngang.

Trong bài này chúng ta sẽ sử dụng kiến thức đã học ở những bài trước như Sprite Image để tạo nút 2 trạng thái. Sau đó dùng CSS để định dạng các thành phần và cuối cùng là sử dụng jQuery để tạo ra hiệu ứng kéo lên, thả xuống.

Giải thích thêm về jQuery

Bởi vì trên izwebz chưa giới thiệu về jQuery cho nên tôi sẽ có thêm phần giải thích này để các bạn có thể hiểu thêm hơn về jQuery. Với những ai chưa biết về jQuery thì jQuery là một dạng thư viện Javascript giúp bạn tiết kiệm thời gian hơn khi viết code HTML và nó cũng đơn giản hơn Javascript. Để tìm hiểu thêm về jQuery bạn có thể vào trang chủ của jQuery và đọc phần Documentation

Khi viết code jQuery bao giờ cũng bắt đầu với:

$(document).ready(function() {

});

Đoạn code này là phần mở đầu cho jQuery và nó có tác dụng là báo cho trình duyệt biết sẽ chạy những đoạn code ở trong nó một khi đã load xong trang web. Và trong bài này thì nó sẽ chạy đoạn code sau:

$('a.tab').click(function(){
            });

Đây là một trong những event handler của jQuery. Hiểu theo ngôn ngữ nói thì là khi ta click vào một thẻ <a> với class=’tab’ thì sẽ chạy đoạn code nằm trong hai dâu {}

$('.active').removeClass('active');
$(this).addClass('active');
$('.content').slideUp();
var content_show = $(this).attr('title');
$('#'+ content_show).slideDown();

Bạn cũng lưu ý là jQuery Selector làm việc với nguyên lý của CSS Selector. Cho nên khi chúng ta muốn chọn những thành phần có class=’active’ thì mình sẽ gọi là $(‘.active’). Khi gọi ra mình muốn làm gì với nó? chúng ta muốn bỏ cái class=’active’ đi do vậy chúng ta sử dụng function removeClass(). Sau khi đã loại bỏ class=’active’ đi, bây giờ sẽ thêm class=’active’ vào nút mà người dùng đang click. Cho nên function addClass() được sử dụng. Khi đã biết người dùng đang ở nút nào thì chỉ việc kéo nội dung của nó lên trên bằng function slideUp().

Cuối cùng thì ta sẽ tạo một biến trong jQuery để tìm ra phần nội dung nào tương ứng với nút đó dựa vào attribute là title. Lấy title lưu lại vào biến content_show và sử dụng function slideDown() để kết thúc code jQuery

Demon Warlock Website facebook twitter user_email

Tôi được sinh ra ở Việt Nam, nhưng hiện tại đang sống và làm việc tại Mỹ. Ngành tôi học không có liên quan gì đến thiết kế web. Nhưng đây là sở thích từ ngày còn là sinh viên du học, do vậy bây giờ dù cho đang đi làm nhưng tôi vẫn thích dùng thời gian rảnh rỗi của mình để học về thiết kế web. Như các bạn, tôi cũng việc mày mò tự học và khám phá.

  • đoàn

    khi thay đổi cái id=”news” hay là cái .popular và cái .featured thì khi F5 thì nó cho ra cả 3 cái ul luôn !

  • Trung

    a cho e hỏi.. nếu chỉ sử dụng css không cần đến js thì code như thế nào vậy?

  • minh

    cho hỏi ngu tý là có hàm slideUp – slideDown vậy nếu muốn cho nó ẩn theo kiểu từ trái sang phỉa hay từ phải sang trái thì dùng hàm gì vậy

  • Bá Nam

    Cảm ơn anh nhiều! Bài viết rất có ích.

  • Linh

    anh ơi, cho em hỏi cái phần mềm anh thao tác là phần mềm gì vậy anh.
    Em nhìn mãi mà ko ra, em thấy nó cũng hay hay mà hok bit là phần mềm j?

  • JohnFred

    Thợ mỏ .. cảm ơn a rất nhiều

  • http://soicau.sms.vn tuyentt

    Cảm ơn anh rất nhiều

  • Nguyễn Hữu Sinh

    Em cảm ơn anh ạ. Em đang làm về phần này và em thấy dễ hiểu hơn so với hướng dẫn ở đây ạ: http://nettuts.com/tutorials/html-css-techniques/how-to-create-a-slick-tabbed-content-area/
    Em thấy ở đó họ dùng javascript ạ. Em cũng muốn chia sẻ ít tài liệu thêm thôi ạ.

  • Onepiece

    cho em hỏi: khi em edit css ngay trên trình duyệt background:url(images/button.png) repeat-x khi tắt edit đi thì lại không có cái hình được load ra.Nhưng background:url(../images/button.png) edit không có hình, tắt edit đi thì nó lại có hình.
    Lỗi này là tại làm sao?

  • lukunkun

    Em học được cách viết css từ web của anh, Cảm ơn anh nhé!

    Trong IE mình ko sử dụng last-child boder bằng none nhưng first-child thì được đấy anh. Cũng tự mò cái ra à. Hehe…

  • NaRuTo

    anh DW bửa nào anh làm 1 bài về bảo mật trong php di anh

  • laizo

    Bài viết rất hay.Anh Demon Warlock cho em hỏi.Trong tutorial này em thấy anh có công cụ chỉnh sửa css ngay trên trình duyệt rất hay. Vậy bô công cụ này mình lấy ở đâu vậy anh?Thanks!

    • lukunkun

      Bạn chọn Tôls tren Firefox->Add-ons->Browse All Add-ons

      Nó sẽ tự động nhảy đến trang Add-ons của Firefox

      Menu bên trái chọn Web Development

      Nhấn Add to Firefox cái Web Development vào sẽ auto install.

  • Quan

    Anh ơi. E đã tạo được một bảng với nền có màu. Giờ e muốn nó trong suốt có màu. Làm sao đây hả anh. giúp e với.

Newbie

Các series nên xem trên izwebz cho newbie

Khi vào izwebz chắc nhiều bạn cho rằng các bài viết trên izwebz đều không có hệ thống gì cả? Thực chất, các bài biết đều đi theo một series của riêng nó, ví dụ như PHP, HTML & CSS, PSD2HTML, Photoshop, illustrator,… Trong bài viết này, mình sẽ tổng hợp lại các series bài viết cần thiết cho một newbie.

Izwebz facebook group

Social connect

Recent Comments

Archives