一个可以搜索页面内超链接的HTML页面

bhZ567

于 2024-08-24 12:32:19 发布

阅读量339

点赞数 5

分类专栏：前端文章标签： html 前端

本文链接：https://blog.csdn.net/2301_76273740/article/details/141497932

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

页面效果如上，含有标题，搜索框和一些超链接，在搜索框输入一些文字可以在下方显示含有这些文字的超链接。这里的搜索不仅可以中文，还可以是英文，数字

HTML代码如下

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>主页面</title>  
<link rel="stylesheet" href="styles.css">  
</head>  
<body>  
  
<h1>Search Links</h1>  
  
<input type="text" id="searchBox" placeholder="Search...">  
  
<div id="linksContainer">  
    <a href="勒让德.html" class="link">勒让德多项式</a><br>  
    <a href="https://www.example2.com" class="link">Example 2</a><br>  
    <a href="https://www.example3.com" class="link">Example 3</a><br>  
    <!-- 可以根据需要添加更多链接 -->  
</div>  
  
<script src="search.js"></script>  
</body>  
</html>

JS代码如下

document.getElementById('searchBox').addEventListener('keyup', function(event) {  
    const searchTerm = event.target.value.toLowerCase();  
    const links = document.querySelectorAll('#linksContainer .link');  
  
    links.forEach(link => {  
        if (link.textContent.toLowerCase().includes(searchTerm)) {  
            link.classList.remove('hidden');  
        } else {  
            link.classList.add('hidden');  
        }  
    });  
});

css代码如下

body, html {  
    margin: 0;  
    padding: 0;  
    font-family: Arial, sans-serif;  
}  
  
.app-container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    height: 100vh;  
    padding: 20px;  
}  
  
input[type=text] {  
    width: 100%;  
    padding: 12px 20px;  
    margin: 8px 0;  
    box-sizing: border-box;  
}  
  
button {  
    width: 100%;  
    background-color: #4CAF50;  
    color: white;  
    padding: 14px 20px;  
    margin: 8px 0;  
    border: none;  
    cursor: pointer;  
}  
  
button:hover {  
    background-color: #45a049;  
}

.hidden { display: none; }