Mã html tab

Chức năng tạo mã tab cho website nhanh chong và đẹp mắt, quý khách lưu ý đọc kỹ hướng dẫn trước khi dùng để đảm bảo mã chạy chuẩn nhất. xin cảm ơn

netweb xin chúc các bạn thành công với mã này

Code show tab default view demo








In this example, we use JavaScript to "click" on the London button, to open the tab on page load.

London Paris Tokyo

London

London is the capital city of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

Tab mã có nút đóng Xem demo








Click on the x button in the top right corner to close the current tab:

London Paris Tokyo

×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

Bài viết mới cập nhật

Mã html tab

Thuộc tính sử dụng của

.tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;   
}
0 để kết nối với lớp chứa nội dung và tab tiêu đề có thể hiển thị trong
.tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;   
}
1


Some content

Some content

Some content

Some content

CSS

Mình chọn vị trí. họ hàng vì mình muốn di chuyển các thẻ đầu vào của nó

.tabs{
    width:750px;
    margin:0 auto 50px; 
    position:relative;
}

Như ở trên đã nhắc đến. tab mình cho là tương đối thì ý đồ của mình cho các thẻ đầu vào là vị trí. tuyệt đối với hàng đầu. 0 và left. 0 để nó hết về 1 chỗ, sau đó mình cho nó ẩn đi bằng thuộc tính hiển thị. không ai;

.tabs input{
    position:absolute;
    top:0;
    left:0;
    display:none;   
}

Tiếp theo ta sẽ định kiểu cho thẻ nhãn. Đầu tiên mình cho nó là trưng bày. chặn để nó trở thành 1 khối, nhưng mỗi nhãn sẽ nằm trên mỗi dòng cho nên mình sẽ sử dụng thuộc tính float. left to all label is on 1 rows. Sau đó mình có sử dụng thuộc tính vị trí. tương đối để sử dụng cho lớp giả (pseudo-class). sau. Các thuộc tính còn lại chủ yếu để style cho Label được bắt mắt hơn thôi, các bạn có thể style theo ý tưởng của mình

.tabs label{
    display:block;
    float:left;
    position:relative;
    padding:10px 30px;
    line-height:1.5em;
    min-width:55px;
    text-align:center;
    color: #385c5b;
    font-size:13px;
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:1px;
    cursor:pointer;
    text-shadow:1px 1px 1px rgba(255,255,255,0.3);
    background:-moz-linear-gradient(top, #5ba4a4 0%, #4e8c8a 100%);
    border-radius:5px 5px 0 0;
    box-shadow:2px 0px 2px rgba(0,0,0,0.1),-2px 0 2px rgba(0,0,0,0.1)/*0.1*/
}

Khi ta di chuột vào nhãn, các đối tượng sẽ thay đổi màu nền

________số 8

Đoạn mã này tôi sử dụng để che phần đổ bóng của thẻ. div nội dung. Các bạn cứ làm theo tôi đi, sau khi hoàn thành sản phẩm các bạn thử xóa đoạn mã này đi thì sẽ biết tác dụng của nhãn. sau này. Tôi sẽ giải thích đoạn mã nội dung như sau. nội dung để thêm nội dung (xác định nội dung được thêm vào). Trưng bày. khối để cho nó trở thành 1 khối và có chiều cao(chiều cao) là 5px, màu nền (nền) là màu trắng (cùng màu với. div content to che đi phần bóng đổ). Sau đó sử dụng left và bottom để di chuyển sao cho hợp lý

.tabs label:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:5px;
    background:#fff;
    left:0;
    bottom:-5px;
}

Khi ta float nhãn sang trái thì nội dung của nó sẽ chạy lên phía trên, nên ta cần sử dụng 1 thẻ div trống để cắt ngang phần nhãn và phần nội dung








Click on the x button in the top right corner to close the current tab:

London Paris Tokyo

×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

0

Bây giờ đến phần style cho nội dung. at the guy. nội dung này ta cho vị trí. relative to di chuyển các thành phần div con của nó








Click on the x button in the top right corner to close the current tab:

London Paris Tokyo

×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

1

This main is a div cons section of the he. content, cứ mỗi nội dung thuộc mỗi tab ta sẽ cho vào 1 thẻ div. Tôi sử dụng vị trí. tuyệt đối; . 0;trái. 0 to the content of all the tag div about 1 position with to the speed on = 0 and left = 0. Ở đây tôi có sử dụng tràn. hidden to che đi những phần dư thừa nằm bên ngoài div và opacity. 0 để ẩn các nội dung bên trong div. Thuộc tính chuyển tiếp. độ mờ đục. 4s để tạo hiệu ứng chuyển đổi nội dung cho bắt mắt và nhìn mượt hơn








Click on the x button in the top right corner to close the current tab:

London Paris Tokyo

×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

2

Khi thẻ đầu vào được kiểm tra (được chọn) thì nhãn thẻ có màu nền là màu trắng (để tạo sự khác biệt so với các thẻ không được chọn). chỉ số z. 6 to it always stay at on the other thành phần không bị che khuất








Click on the x button in the top right corner to close the current tab:

London Paris Tokyo

×

London

London is the capital city of England.

×

Paris

Paris is the capital of France.

×

Tokyo

Tokyo is the capital of Japan.

3

Đây chính là đoạn mã quan trọng nhất mà củng cố đơn giản nhất trong bài =))). Ý nghĩa như sau. độ mờ. 1 để hiển thị lại các nội dung ở các thẻ. nội dung-1,. nội dung-2,. nội dung-3,. content-4 when the input. bộ chọn tab-1, đầu vào. tab-selector-2, đầu vào. tab-selector-3, đầu vào. tab-selector-4 đã được chọn (được chọn)

Nếu không có thuộc tính z-index. 100 thì khi các bạn bôi đen nội dung văn bản của các thẻ About, services, work will not been. Mà chỉ bôi đen là nội dung của thẻ liên hệ thôi vì nó nằm trên cùng. Còn z-index. 5 is to che phần bóng đổ của nội dung thẻ khi được kiểm tra