HTML5商品列表切換是網(wǎng)頁開發(fā)中非常常見的一種功能。這種切換通常會應(yīng)用在一些電商網(wǎng)站中，用戶可以點擊不同的選項，然后商品列表會相應(yīng)地切換顯示出不同的商品。接下來就來介紹一下HTML5商品列表切換的實現(xiàn)方法。 首先，我們需要在HTML代碼中定義一個包含商品列表的容器，如下所示：

<div id="products">
<p class="active" data-filter="all">所有商品</p>
<p data-filter="electronics">電子產(chǎn)品</p>
<p data-filter="books">圖書</p>
<p data-filter="clothing">服裝</p>
</div>
<div class="product-list">
<div class="product electronics">電子1</div>
<div class="product clothing">服裝1</div>
<div class="product books">圖書1</div>
...
</div>

在上面的代碼中，我們定義了一個id為“products”的div容器，里面包含了商品分類的選項。其中，第一個選項默認(rèn)為“所有商品”，并且添加了一個class為“active”。每個選項都有一個自定義屬性data-filter，用于指定相應(yīng)的商品列表。在容器下面，我們又定義了一個class為“product-list”的div容器，用于存放商品列表。 接下來，我們需要利用JavaScript代碼來實現(xiàn)商品列表的切換。代碼如下所示：

var products = document.querySelector('#products');
var productList = document.querySelector('.product-list');
products.addEventListener('click', function(event) {
var active = document.querySelector('#products .active');
var target = event.target;
var filter = target.getAttribute('data-filter');
if (filter !== null) {
active.classList.remove('active');
target.classList.add('active');
var products = productList.querySelectorAll('.product');
for (var i = 0; i< products.length; i++) {
var product = products[i];
if (filter === 'all' || product.classList.contains(filter)) {
product.style.display = 'block';
} else {
product.style.display = 'none';
}
}
}
});

在上面的代碼中，我們首先通過querySelector方法獲取到id為“products”和class為“product-list”的div容器，然后給“products”容器添加了一個click事件監(jiān)聽器。當(dāng)用戶點擊一個商品分類的選項時，該事件監(jiān)聽器就會被觸發(fā)。 在事件監(jiān)聽器中，我們首先利用querySelector方法獲取當(dāng)前已經(jīng)激活的選項，然后獲取用戶點擊的選項和該選項對應(yīng)的數(shù)據(jù)過濾器。接下來，我們判斷用戶點擊的選項是否有data-filter這個屬性，如果有的話就進(jìn)行以下操作： 1.移除已經(jīng)激活的選項的class“active”，并為當(dāng)前點擊的選項添加“active”class。 2.獲取商品列表容器中的所有商品，然后遍歷這些商品。 3.如果當(dāng)前選項的data-filter值為“all”或者商品的class中包含當(dāng)前選項的data-filter值，就把該商品顯示出來。否則，就把商品隱藏。 最后，我們就成功地實現(xiàn)了HTML5商品列表切換的功能。這種實現(xiàn)方法簡單易懂，且非常實用，適用于各類網(wǎng)頁開發(fā)項目。