山脈
Lorem ipsum dolor..
如何操作 - 帶過濾器的投資組合畫廊
瞭解如何建立帶過濾器的投資組合畫廊。
我的投資組合
點選按鈕過濾類別
燈光
Lorem ipsum dolor..
森林
Lorem ipsum dolor..
復古
Lorem ipsum dolor..
快速
Lorem ipsum dolor..
經典
Lorem ipsum dolor..
女孩
Lorem ipsum dolor..
男人
Lorem ipsum dolor..
女人
Lorem ipsum dolor..
如何建立投資組合網站
步驟 1) 新增 HTML
示例
<h2>投資組合</h2>
<div id="myBtnContainer">
<button class="btn active" onclick="filterSelection('all')"> 顯示所有</button>
<button class="btn" onclick="filterSelection('nature')"> 自然</button>
<button class="btn" onclick="filterSelection('cars')"> 汽車</button>
<button class="btn" onclick="filterSelection('people')"> 人物</button>
</div>
<!-- 投資組合畫廊網格 -->
<div class="row">
<div class="column nature">
<div class="content">
<img src="/w3images/mountains.jpg" alt="Mountains" style="width:100%">
<h4>山脈</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/lights.jpg" alt="Lights" style="width:100%">
<h4>燈光</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column nature">
<div class="content">
<img src="/w3images/nature.jpg" alt="Nature" style="width:100%">
<h4>森林</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars1.jpg" alt="Car" style="width:100%">
<h4>復古</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars2.jpg" alt="Car" style="width:100%">
<h4>快速</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column cars">
<div class="content">
<img src="/w3images/cars3.jpg" alt="Car" style="width:100%">
<h4>經典</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people1.jpg" alt="People" style="width:100%">
<h4>女孩</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people2.jpg" alt="People" style="width:100%">
<h4>男人</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<div class="column people">
<div class="content">
<img src="/w3images/people3.jpg" alt="People" style="width:100%">
<h4>女人</h4>
<p>Lorem ipsum dolor..</p>
</div>
</div>
<!-- 網格結束 -->
</div>
步驟 2) 新增 CSS
示例
* {
box-sizing: border-box;
}
body {
background-color: #f1f1f1;
padding: 20px;
font-family: Arial;
}
/* 居中網站 */
.main {
max-width: 1000px;
margin: auto;
}
h1 {
font-size: 50px;
word-break: break-all;
}
.row {
margin: 8px -16px;
}
/* 如果需要，請在每個列之間新增間距 */
.row,
.row > .column {
padding: 8px;
}
/* 建立三個等寬並排的列 */
.column {
float: left;
width: 33.33%;
display: none; /* 預設隱藏列 */
}
/* 行後的清除浮動 */
.row:after {
content: "";
display: table;
clear: both;
}
/* 內容 */
.content {
background-color: white;
padding: 10px;
}
/* "show" 類已新增到過濾後的元素 */
.show {
display: block;
}
/* 樣式按鈕 */
.btn {
border: none;
outline: none;
padding: 12px 16px;
background-color: white;
cursor: pointer;
}
/* 滑鼠懸停時新增灰色背景 */
.btn:hover {
background-color: #ddd;
}
/* 為活動按鈕新增深色背景 */
.btn.active {
background-color: #666;
color: white;
}
步驟 3) 新增 JavaScript
示例
filterSelection("all") // 執行函式並顯示所有列
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("column");
if (c == "all") c = "";
// 將 "show" 類（display:block）新增到過濾後的元素，並從未選擇的元素中移除 "show" 類
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// 顯示過濾後的元素
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// 隱藏未選擇的元素
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// 為當前按鈕新增 active 類（高亮顯示）
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function(){
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
自己動手試一試 »
提示：還可以檢視 投資組合畫廊
