本文主要是介绍一个可以搜索页面内超链接的HTML页面，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
页面效果如上，含有标题，搜索框和一些超链接，在搜索框输入一些文字可以在下方显示含有这些文字的超链接。这里的搜索不仅可以中文，还可以是英文，数字
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; }这篇关于一个可以搜索页面内超链接的HTML页面的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
