30/09/2018, 18:39

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

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

vũ xuân quân viết 20:44 ngày 30/09/2018

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ỉ.

Võ Hoài Nam viết 20:45 ngày 30/09/2018

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

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;

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

Tạ Duy Hoàng viết 20:39 ngày 30/09/2018

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

Nam Nguyen viết 20:54 ngày 30/09/2018

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

Nguyễn Bảo viết 20:49 ngày 30/09/2018

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

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

Tạ Duy Hoàng