Cách tạo các tab Server, Thiết bị mạng như trong hình?

#1

Mọi người cho em hỏi, em làm trang web này, nhưng thẻ để tạo các tab như trong hình thì e chưa biết ạ, ai biết chỉ em với ạ
HTML

#2

cái này là HTML thuần thôi phải không em. Có được dùng thư viện khác để làm không ? Có dùng html5 không ?
Cần nói rõ hơn nữa để mọi người biết để chỉ.

#3

Trang đó bạn chia làm 2 phần:

  1. Tab
<ul>
    <li>Server</li>
    <li>Thiết bị mạng</li>
    <li>...</li>
    <li>...</li>
</ul>

Cơ bản nó cũng chỉ là list, bạn thêm 1 trong các thuộc tính CSS sau để nó dồn lên một hàng

display: inline-block;
display: flex;
float: left;
  1. Nội dung của tab
    Phần này chỉ là 4 thẻ <div> có CSS như sau:
width: 100%;
display: none;

Lý do display: none là vì mặc định, nó sẽ không hiện… khi nào cần hiện (active) thì thuộc tính display chỉ cần sửa thành display: block là được.

Để có thể chuyển tab được thì bạn viết thêm JavaScript. Khi nhấn tab nào thì nội dung của tab đó tự động display: block, các tab còn lại chuyển về display: none

Hướng giải quyết của mình là như vậy, nếu có chỗ nào chưa rõ, bạn cứ ghi rõ ra :wink:

1 Like
#4

ok men, mình đã hiểu ý tưởng bạn đưa ra. Cảm ơn ạ!!!

#5

Bạn có thể sư dụng tab bên bootstrap nếu k css, js nhiều http://getbootstrap.com/javascript/#tabs-examples

#6

Không liên quan nhiều, nhưng bạn dùng phần mềm gì để vẽ mockup vậy?

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?