使用 JavaScript 和 CSS 實(shí)現(xiàn)篩選按鈕是一種常見的網(wǎng)站設(shè)計技巧，可以讓用戶在頁面上自主篩選內(nèi)容。在本文中，我們將介紹如何使用 JavaScript 和 CSS 來創(chuàng)建一個篩選按鈕，使用戶可以方便地篩選頁面上的不同內(nèi)容。

首先，我們需要創(chuàng)建一個包含篩選按鈕的 HTML 元素。我們可以使用 CSS 樣式來為該元素添加樣式，例如選擇器和邊框。然后，我們可以使用 JavaScript 腳本來實(shí)現(xiàn)篩選按鈕的功能。

下面是一個簡單的示例，演示如何使用 JavaScript 和 CSS 創(chuàng)建一個篩選按鈕：

HTML 代碼：

<button id="filter-btn">篩選</button>

CSS 樣式：

#filter-btn {

background-color: #4CAF50;

border: none;

color: white;

padding: 10px 20px;

text-align: center;

text-decoration: none;

display: inline-block;

font-size: 16px;

margin: 5px 2px;

cursor: pointer;

border-radius: 5px;

JavaScript 代碼：

document.getElementById("filter-btn").addEventListener("click", function() {

var filter = document.getElementById("filter-input").value;

var filterIndex = filter.indexOf("篩選");

if (filterIndex !== -1) {

document.getElementById("filter-output").innerHTML = "過濾：" + filter;

} else {

document.getElementById("filter-output").innerHTML = "未篩選：" + filter;

在這個示例中，我們使用 CSS 樣式為篩選按鈕添加了一個背景顏色、邊框和文本樣式。我們還使用 JavaScript 腳本為篩選按鈕添加了一個點(diǎn)擊事件，以便用戶可以點(diǎn)擊按鈕來選擇要篩選的內(nèi)容。

通過使用 JavaScript 和 CSS，我們可以創(chuàng)建一個簡單而易于使用的篩選按鈕，使用戶可以方便地瀏覽和篩選網(wǎng)站中的內(nèi)容。