要显示搜索栏并在单击时将其放入导航项目中,可以通过以下步骤实现:
<input>
标签来创建一个文本输入框,以及一个提交按钮,例如:<div class="navbar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li>
<form id="search-form">
<input type="text" id="search-input" placeholder="搜索...">
<button type="submit">搜索</button>
</form>
</li>
</ul>
</div>
.navbar {
background-color: #f2f2f2;
padding: 10px;
}
.navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
}
.navbar li {
margin-right: 10px;
}
.navbar form {
display: flex;
}
.navbar input[type="text"] {
padding: 5px;
border: none;
border-radius: 3px;
}
.navbar button {
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 3px;
}
document.getElementById("search-form").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单提交的默认行为
var searchInput = document.getElementById("search-input");
var searchValue = searchInput.value;
if (searchValue.trim() !== "") {
var navItem = document.createElement("li");
var navLink = document.createElement("a");
navLink.href = "#";
navLink.textContent = searchValue;
navItem.appendChild(navLink);
var navList = document.querySelector(".navbar ul");
navList.appendChild(navItem);
searchInput.value = ""; // 清空搜索栏内容
}
});
这样,当用户在搜索栏中输入内容并点击提交按钮时,会将输入的内容作为导航项目添加到导航栏中。
注意:以上代码只是一个示例,实际应用中可能需要根据具体情况进行适当的修改和调整。
领取专属 10元无门槛券
手把手带您无忧上云