<div class="search"><input type="text" placeholder="监控摄像头"><span></span></div> <div class="car">这段代码如何加一个类似京东搜索跳转的代码
时间: 2023-08-14 07:08:42 浏览: 96
你可以为搜索按钮添加一个点击事件,当按钮被点击时,获取输入框中的文本,然后将其添加到跳转链接的查询参数中。以下是一个示例代码:
HTML 代码:
```html
<div class="search">
<input type="text" id="searchInput" placeholder="监控摄像头">
<span id="searchBtn"></span>
</div>
<div class="car">
<!-- 这里是购物车内容 -->
</div>
```
JavaScript 代码:
```javascript
// 获取搜索按钮和输入框
var searchBtn = document.getElementById('searchBtn');
var searchInput = document.getElementById('searchInput');
// 为搜索按钮添加点击事件
searchBtn.addEventListener('click', function() {
// 获取搜索词
var keyword = searchInput.value;
// 跳转链接
var url = 'https://www.jd.com/s?keyword=' + encodeURIComponent(keyword);
// 在新窗口中打开跳转链接
window.open(url, '_blank');
});
```
上述代码中,我们使用了 `encodeURIComponent` 函数对搜索词进行 URL 编码,以确保跳转链接的查询参数不会出现任何问题。你可以将 `window.open` 函数中的 `_blank` 参数改为 `_self`,这样搜索结果会在当前窗口中打开。
阅读全文