JS模拟百度搜索框和选项卡的实现

更新时间：2022年03月31日 10:33:25 作者：dengfengling999

本文主要介绍了JS模拟百度搜索框和选项卡的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

练习1

实现搜索框内，输入相关数字，在下方显示相关内容，模拟百度搜索，详细代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .content {
            width: 600px;
            height: 500px;
 
            margin: 0 auto;
        }
 
        .show {
            display: none;
            width: 200px;
            height: 300px;
            border: solid 1px black;
        }
    </style>
</head>
 
<body>
    <div class="content">
        <div class="serach">
            <input type="text" id="val" placeholder="请输入课程" style="width:200px; height:30px;">
            <input type="submit" id="sub">
        </div>
        <div class="show" id="show"></div>
    </div>
 
    <script>
        //以数组为例，可以连接数据库，进行查询数据
        let arr = ['web前端精英特训班 980元', 'HTML核心技术 199元', 'CSS核心技术 299元', 'Vue核心技术 599元',
            'CSS+HTML核心技术 299元', 'web前端在线商城 99元', 'JavaScript核心技术 399元', 'JavaScript高级技术 899元'];
 
        //先完成，展示区域的显示与隐藏
        let input = document.getElementById('val');
        let show = document.getElementById('show');
        input.onkeyup = function () {
            //当键盘抬起时触发
            show.style.display = 'block';
            //input.value和arr的每一项进行匹配 用indexOf()：方法可返回某个指定的字符串值在字符串中首次出现的位置， 匹配到返回下标，匹配不到返回-1
            let str = '';
            arr.forEach((item) => {//forEach（）中第一个元素item，代表数组中的元素，每一项
                let res = item.indexOf(input.value);
                if (res != -1) {
                    str += '<p>' + item + '</p>';
                }
            })
            //判断input.value为空或者str数组中没有，给用户一个提示
            if (!input.value || !str) {
                show.innerHTML = '<p>暂无结果</p>';
            } else {
                show.innerHTML = str;
            }
 
 
        }
        input.onblur = function () {
            //失去焦点隐藏
            show.style.display = 'none';
            input.value = '';
        }
    </script>
</body>
 
</html>

结果：

点击搜索框时：

练习2，选项卡，详细代码如下：

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
 
        ul {
            overflow: hidden;
        }
 
        li {
            width: 100px;
            height: 40px;
            background-color: #ccc;
            border: 1px solid #ccc;
            float: left;
            line-height: 40px;
            /*设置行高等于height高度文字会垂直居中显示*/
            text-align: center;
        }
 
        div {
            width: 406px;
            height: 406px;
            border: 1px solid #ccc;
        }
 
        img {
            width: 406px;
            height: 406px;
            display: none;
        }
    </style>
</head>
 
<body>
    <ul>
        <li>大菊</li>
        <li>英短</li>
        <li>美短</li>
        <li>布偶</li>
    </ul>
    <div>
        <img src="images/15.jpg" alt="" style="display: block;">
        <img src="images/16.jpg" alt="">
        <img src="images/17.jpg" alt="">
        <img src="images/18.jpg" alt="">
    </div>
 
    <script>
        //1.移动到那个选项卡上边，背景颜色要改变，对用的内容区域要显示
        //移出时背景颜色恢复，对应内容区域隐藏
        let li = document.getElementsByTagName('li');
        let img = document.getElementsByTagName('img');
        for (let i = 0; i < li.length; i++) {
            //先进性元素数组的下标的设置 在js中获取数组的下标用 .index
            li[i].index = i;
 
            //移入时的属性
            li[i].onmousemove = function () {
                li[i].style.backgroundColor = 'yellow';
 
                //先把所有的图片进行隐藏，再让对应的图片出现
                for (let j = 0; j < img.length; j++) {
                    img[j].style.display = 'none';
                }
                img[this.index].style.display = 'block';
            }
            //移出时恢复原来的颜色
            li[i].onmouseout = function () {
                li[i].style.backgroundColor = '#eee';
            }
        }
 
    </script>
</body>
 
</html>

结果：

file:///C:/Users/DELL/Pictures/Screenshots/屏幕截图(15).jpg

点击第二个选项卡时：

到此这篇关于JS模拟百度搜索框和选项卡的实现的文章就介绍到这了,更多相关JS模拟百度搜索框和选项卡内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JS高级调试技巧：捕获和分析 JavaScript Error详解
前端工程师都知道 JavaScript 有基本的异常处理能力。我们可以 throw new Error()，浏览器也会在我们调用 API 出错时抛出异常。但估计绝大多数前端工程师都没考虑过收集这些异常信息
2014-03-03
基于js + html2canvas实现网页放大镜功能
最近接到任务,需实现【网页】放大镜的效果,百度搜索【js 放大镜】关键字,千篇一律的都是一些仿淘宝/京东等电商网站中查看规格大图的效果实现,根本无法满足我的需求,于是自己花了点时间调研实现,在这里分享给大家,感兴趣的朋友可以参考下
2023-12-12
javascript使用appendChild追加节点实例
这篇文章主要介绍了javascript使用appendChild追加节点的方法,实例分析了appendChild()函数增加结点的使用技巧,需要的朋友可以参考下
2015-01-01
JavaScript数组扁平转树形结构数据(Tree)的实现
本文主要介绍了JavaScript数组扁平转树形结构数据(Tree)的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-08-08
一文详解Javascript内存机制与垃圾回收
这篇文章主要给大家详细介绍了Javascript的内存机制与垃圾回收，文中又详细的代码示例，对我们学习Javascript有一定的帮助，需要的同学可以借鉴阅读
2023-06-06
JS简单数组排序操作示例【sort方法】
这篇文章主要介绍了JS简单数组排序操作,结合实例形式分析了javascript使用sort方法进行数组排序的相关操作技巧,需要的朋友可以参考下
2019-05-05
微信小程序使用第三方库Immutable.js实例详解
Immutable 是 Facebook 开发的不可变数据集合。不可变数据一旦创建就不能被修改，是的应用开发更简单，允许使用函数式编程技术，比如惰性评估。微信小程序无法直接使用Immutable.js，下面就来说说微信小程序如何使用第三方库Immutable.js。
2016-09-09
layui 上传图片返回图片地址的方法
今天小编就为大家分享一篇layui 上传图片返回图片地址的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS获取和修改元素样式的实例代码
下面小编就为大家带来一篇JS获取和修改元素样式的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
Javascript 一些需要注意的细节(必看篇)
下面小编就为大家带来一篇Javascript 一些需要注意的细节(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07