如何操作 - 搜索菜单
了解如何使用 JavaScript 创建搜索菜单来过滤链接。
搜索/过滤菜单
如何在导航菜单中搜索链接
页面内容
在搜索框中输入特定类别/链接以“过滤”搜索选项。
一些文本..一些文本..一些文本..一些文本..一些文本..一些文本..一些文本..一些文本..
一些其他文本..一些文本..一些文本..一些文本..一些文本..一些文本..一些文本..一些文本..
一些文本..
创建搜索菜单
步骤 1) 添加 HTML
注意：在此演示中，我们使用了 href="#"，因为我们没有要链接到的页面。在实际生活中，这应该是一个指向特定页面的真实 URL。
步骤 2) 添加 CSS
样式搜索框和导航菜单
示例
/* 样式搜索框 */
#mySearch {
width: 100%;
font-size: 18px;
padding: 11px;
border: 1px solid #ddd;
}
/* 样式导航菜单 */
#myMenu {
list-style-type: none;
padding: 0;
margin: 0;
}
/* 样式导航链接 */
#myMenu li a {
padding: 12px;
text-decoration: none;
color: black;
display: block
}
#myMenu li a:hover {
background-color: #eee;
}
步骤 3) 添加 JavaScript
示例
<script>
function myFunction() {
// 声明变量
var input, filter, ul, li, a, i;
input = document.getElementById("mySearch");
filter = input.value.toUpperCase();
ul = document.getElementById("myMenu");
li = ul.getElementsByTagName("li");
// 遍历所有列表项，并隐藏不匹配搜索查询的项
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
自己动手试一试 »
提示： 如果您想执行区分大小写的搜索，请删除 toUpperCase()。
提示：还可以查看 如何过滤表格。
提示：还可以查看 如何过滤列表。
