如何操作 - 扩展网格

了解如何使用 CSS 和 JavaScript 创建扩展网格。

扩展网格

单击一个框以"expand"（100% 宽度）：

盒子1

Lorem ipsum dolor sat amet，te quo doctus abhorreant，et pri deleniti intellegat，te saintus inermis ullamcorper nam。 Ius 错误 diceret deseruisse 广告

盒子2

Lorem ipsum dolor sat amet，te quo doctus abhorreant，et pri deleniti intellegat，te saintus inermis ullamcorper nam。 Ius 错误 diceret deseruisse 广告

方框3

Lorem ipsum dolor sat amet，te quo doctus abhorreant，et pri deleniti intellegat，te saintus inermis ullamcorper nam。 Ius 错误 diceret deseruisse 广告

亲自试一试 »

创建扩展网格

步骤1）添加HTML：

示例

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


<div id="b1" class="containerTab" style="display:none;background:green">

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

步骤2）添加CSS：

创建三列：

示例

/* 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;
}

步骤 3) 添加 JavaScript：

示例

// 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";
}

亲自试一试 »