想改善這個問題?通過編輯這篇文章來添加細節和澄清問題。
首先,OL/UL允許李作為孩子,而不是base/div等。基地也不應該這樣使用。
我更新了你的HTML,所以它是正確的,我還刪除了p標簽,因為它們是用于段落文本的。
為了通過CSS引用所有的錨標記,可以使用#list a,因為空格會自動引用匹配的& quot兒童& quot。
更新 有了新的信息,我更新了我的答案,增加了一個改進的javascript搜索功能。
您可以循環訪問querySelectorAll中的元素并傳遞選擇器,而不需要特定的類。
我還更新了javascript來切換一個活動類來隱藏/顯示結果。
function search_animal() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let links = document.querySelectorAll('#list li');
links.forEach((e) => {
e.classList.toggle("active",e.innerText.toLowerCase().includes(input))
});
}
let searchbar = document.querySelector("#searchbar");
searchbar.addEventListener("input",search_animal);
li{
display:none;
}
li.active{
display:list-item;
}
<input placeholder="Enter in search text here" id="searchbar">
<div class="column">
<ol id='list'>
<li>
<a href="">
yes
</a>
</li>
<li>
<a href="">
yeah
</a>
</li>
</ol>
</div>
JS示例:
`function search_animal() {
let input = document.getElementById('searchbar').value
input = input.toLowerCase();
let links = document.querySelectorAll('#list li');
links.forEach((e) => {
e.classList.toggle("active",e.innerText.toLowerCase().includes(input))
});
}
let searchbar = document.querySelector("#searchbar");
searchbar.addEventListener("input",search_animal);`
不要試圖直接將元素設置為一個類,而是找到父元素并獲取它所包含的內容(您試圖設置為一個類的初始元素),然后主要使用JS修改父元素。
設置& lta & gt元素,只需添加class = & quot你的班級& quot敬你的& lta & gt元素。我還建議刪除& ltp & gt元素從您的& lta & gt元素。
<a href="" class="your_class">yes</a>
此外,& ltbase & gt元素不是正確的元素。我也會移動& ltdiv & gt它在有序列表之外。
<ol id="list">
<li><a class="your_class" href="">yes</a></li>
<li><a class="your_class" href="">yeah</a></li>
</ol>
下一篇vue 路由會閃