HTML书签展示(带搜索)
HTML书签是一种很方便的方式,可以让我们将常用的网页链接保存起来,方便随时查看。在传统的浏览器中,我们可以通过书签栏或书签菜单来展示我们保存的书签。但是,随着互联网的发展,我们的书签数量可能越来越多,如果需要快速找到某个特定的书签就可能变得困难。因此,为HTML书签添加搜索功能,可以使我们更加方便地管理和查找书签。
在这篇文章中,我将介绍如何通过使用HTML、CSS和JavaScript来实现一个可搜索的HTML书签展示。
首先,我们需要建立一个基本的HTML结构来展示书签。我们可以使用无序列表(`
- `)来表示书签列表,每个书签使用列表项(`
- `)表示。每个列表项包含书签的标题和链接。
```html
书签展示 ```
接下来,我们需要为书签列表添加样式,以此定义书签的外观。我们可以添加一个CSS文件(styles.css),在其中定义书签的样式。
```css
body {
font-family: Arial, sans-serif;
}
ul {
list-style-type: none;
padding: 0;
}
li {
margin-bottom: 10px;
}
a {
text-decoration: none;
color: #333;
}
a:hover {
text-decoration: underline;
}
#searchInput {
margin-bottom: 10px;
}
```
到目前为止,我们已经定义了书签列表的结构和样式。接下来,我们需要为搜索功能添加一些JavaScript代码。
```javascript
const searchInput = document.getElementById('searchInput');
const bookmarkList = document.getElementById('bookmarkList');
const bookmarks = [
{ title: 'Google', url: 'https://www.google.com' },
{ title: 'Baidu', url: 'https://www.baidu.com' },
{ title: 'Bing', url: 'https://www.bing.com' },
{ title: 'Yahoo', url: 'https://www.yahoo.com' },
{ title: 'GitHub', url: 'https://www.github.com' }
];
function displayBookmarks(bookmarks) {
bookmarkList.innerHTML = '';
bookmarks.forEach(bookmark => {
const li = document.createElement('li');
const a = document.createElement('a');
a.href = bookmark.url;
a.textContent = bookmark.title;
li.appendChild(a);
bookmarkList.appendChild(li);
});
}
displayBookmarks(bookmarks);
searchInput.addEventListener('input', () => {
const searchText = searchInput.value.toLowerCase();
const filteredBookmarks = bookmarks.filter(bookmark => bookmark.title.toLowerCase().includes(searchText));
displayBookmarks(filteredBookmarks);
});
```
上述代码中,我们首先定义了一个包含书签信息的数组(`bookmarks`)。然后,我们定义了一个`displayBookmarks`函数,用于将书签显示在页面上。函数遍历书签数组,并为每个书签创建一个列表项,并将其添加到书签列表中。
接着,我们将定义一个事件监听器,监听`searchInput`的输入事件。每当用户在搜索框中输入内容时,监听器将会执行。在监听器中,我们获取用户输入的搜索文本,并通过过滤数组的方式,找出包含搜索文本的书签,并将其传递给`displayBookmarks`函数以进行展示。
到此为止,我们已经完成了一个带有搜索功能的HTML书签展示。用户可以通过在搜索框中输入文本来查找特定的书签,搜索结果会实时显示在书签列表中。
总结起来,通过使用HTML、CSS和JavaScript,我们可以为HTML书签添加搜索功能,以便更方便地管理和查找书签。我们通过定义HTML结构、样式和JavaScript代码,实现了一个可搜索的HTML书签展示。这个小应用可以帮助我们更高效地管理和使用我们保存的书签。
如果你喜欢我们的文章,欢迎您分享或收藏为众码农的文章! 我们网站的目标是帮助每一个对编程和网站建设以及各类acg,galgame,SLG游戏感兴趣的人,无论他们的水平和经验如何。我们相信,只要有热情和毅力,任何人都可以成为一个优秀的程序员。欢迎你加入我们,开始你的美妙旅程!www.weizhongchou.cn
发表评论 取消回复