Làm thế nào để - Mở rộng lưới
Tìm hiểu cách tạo lưới mở rộng bằng CSS và JavaScript.
Mở rộng lưới
Nhấp vào một hộp để "mở rộng" nó (100% chiều rộng):
×
Hộp 1
Hãy kiểm tra bản thân nỗi đau, để những gì học được rút ra từ bạn và hiểu rằng nó xoa dịu bạn. Lỗi đúng có nghĩa là quảng cáo bị bỏ rơi
×
Hộp 2
Hãy kiểm tra bản thân nỗi đau, để những gì học được rút ra từ bạn và hiểu rằng nó xoa dịu bạn. Lỗi đúng có nghĩa là quảng cáo bị bỏ rơi
×
Hộp 3
Hãy kiểm tra bản thân nỗi đau, để những gì học được rút ra từ bạn và hiểu rằng nó xoa dịu bạn. Lỗi đúng có nghĩa là quảng cáo bị bỏ rơi
Tạo một lưới mở rộng
Bước 1) Thêm HTML:
Thí dụ
<!-- The grid: three columns -->
<div class="row">
<div class="column" onclick="openTab('b1');" style="background:green;">Box
1</div>
<div class="column" onclick="openTab('b2');" style="background:blue;">Box
2</div>
<div class="column" onclick="openTab('b3');" style="background:red;">Box
3</div>
</div>
<!-- The expanding grid (hidden by default) -->
<div id="b1" class="containerTab" style="display:none;background:green">
<!-- If you want the ability to close the container, add a close button -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 1</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b2" class="containerTab" style="display:none;background:blue">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 2</h2>
<p>Lorem ipsum..</p>
</div>
<div id="b3" class="containerTab" style="display:none;background:red">
<span onclick="this.parentElement.style.display='none'" class="closebtn">x</span>
<h2>Box 3</h2>
<p>Lorem ipsum..</p>
</div>
Bước 2) Thêm CSS:
Tạo ba cột:
Thí dụ
/* The grid: Three equal columns that floats next to each other */
.column
{
float: left;
width: 33.33%;
padding: 50px;
text-align: center;
font-size: 25px;
cursor: pointer;
color: white;
}
.containerTab
{
padding: 20px;
color: white;
}
/* Clear floats after the
columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Closable button inside the image */
.closebtn {
float: right;
color: white;
font-size: 35px;
cursor: pointer;
}
Bước 3) Thêm JavaScript:
Thí dụ
// Hide all elements with class="containerTab",
except for the one that matches the clickable grid column
function openTab(tabName) {
var i, x;
x = document.getElementsByClassName("containerTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(tabName).style.display = "block";
}