今天我們來介紹一款可以幫助我們過濾電影類型的HTML代碼模板。通常在電影娛樂類網(wǎng)站，我們經(jīng)常需要根據(jù)不同的電影類型來搜索或?yàn)g覽電影。使用這個(gè)模板，我們可以很方便地實(shí)現(xiàn)這個(gè)功能。 首先，我們需要?jiǎng)?chuàng)建一個(gè)電影列表，每一項(xiàng)電影都應(yīng)該包括電影的名稱、類型和海報(bào)圖像。這可以使用HTML的UL和LI標(biāo)簽來實(shí)現(xiàn)。我們將在每個(gè)LI元素中添加一個(gè)名為“type”的自定義屬性，用于表示該電影的類型。

<ul id="movie-list">
<li type="action">
<img src="poster-1.jpg" alt="Avenger">
<p>Avenger</p>
<p>Action</p>
</li>
<li type="action">
<img src="poster-2.jpg" alt="Die Hard">
<p>Die Hard</p>
<p>Action</p>
</li>
<li type="drama">
<img src="poster-3.jpg" alt="Forrest Gump">
<p>Forrest Gump</p>
<p>Drama</p>
</li>
<li type="drama">
<img src="poster-4.jpg" alt="The Shawshank Redemption">
<p>The Shawshank Redemption</p>
<p>Drama</p>
</li>
</ul>

接下來，我們需要添加一個(gè)過濾器，允許用戶根據(jù)選擇的類型來過濾電影列表。我們可以使用HTML的SELECT和OPTION標(biāo)簽來創(chuàng)建一個(gè)下拉菜單。

<p>Filter By:</p>
<select id="type-filter">
<option value="all">All</option>
<option value="action">Action</option>
<option value="drama">Drama</option>
</select>

然后，我們需要使用JavaScript來實(shí)現(xiàn)過濾器的功能。我們將添加一個(gè)事件監(jiān)聽器，以便當(dāng)用戶選擇一個(gè)不同的類型時(shí)，我們將動(dòng)態(tài)地更新電影列表。

var movieList = document.getElementById('movie-list');
var typeFilter = document.getElementById('type-filter');
typeFilter.addEventListener('change', function() {
var selectedType = typeFilter.value;
for (var i = 0; i < movieList.children.length; i++) {
var movieItem = movieList.children[i];
var movieType = movieItem.getAttribute('type');
if (selectedType === 'all' || selectedType === movieType) {
movieItem.style.display = 'block';
} else {
movieItem.style.display = 'none';
}
}
});

這段代碼將獲取電影列表和類型過濾器的引用，并添加一個(gè)事件監(jiān)聽器。每當(dāng)用戶選擇一個(gè)不同的類型時(shí)，我們將遍歷電影列表，并根據(jù)電影的類型是否與選定的類型匹配來隱藏或顯示電影列表中的每個(gè)電影。 這就是整個(gè)過程！使用這個(gè)HTML代碼模板，你的網(wǎng)站上的電影類型過濾功能將更加易于使用和實(shí)現(xiàn)。