• 热点推荐:
 首页 / web案例 / 正文
javascript 用Tab栏切换方式制作简单的聚合搜索方法

Time:2021年10月30日 Read:88 评论:1 作者:小天老师

时间久了,用2345主页也越来越不舒服了,就想着粗略的做一个简单的聚合搜索,又能百度、又能谷歌、又能B站或者必应搜索,可能最近在B站逛得太久了,总是要打开B站主页搜索有点麻烦,故而自己动手,丰衣足食。

Tab栏切换:

<!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>Tab栏切换</title>
    <style>
        * {
            margin: 0;
            padding: 0;
         
        }

        .tab-list {
            width: 410px;
            height: 32px;
            line-height: 32px;
            border: 1px solid rgba(102, 153, 255, 0.3);
            background-color: #fff;
            background-color: plum;
        }

        .tab-list ul li {
            float: left;
            list-style: none;
            width: 132px;
            height: 32px;
            border-right: 1px solid rgba(102, 153, 255, 0.3);
            text-align: center;
            cursor: pointer;
        }

        .tab-list ul li:last-child {
            width: 144px;
            border-right: 0;
        }

        .items {
            display: none;
        }

        /*  */
        .tab-bd {
            background-color: pink;
            height: 30px;
        }
    </style>
</head>

<body>
    <div class="tab-list">
        <ul>
            <li style="background-color: #6699ff; color: #fff">网址大全</li>
            <li>音乐播放</li>
            <li>游戏大全</li>
        </ul>
    </div>
    <div class="tab-bd">
        <div class="items" style="display: block;">好牛逼的网址导航</div>
        <div class="items">动听的美妙音乐</div>
        <div class="items">今天玩魔兽,明天玩王者</div>
    </div>
    <script>
        var lis = document.querySelector('.tab-list').querySelectorAll('li');
        var tabd = document.querySelector('.tab-bd');
        var divs = tabd.querySelectorAll('.items');

        for (var i = 0; i < lis.length; i++) {

            lis[i].setAttribute('index', i);
            lis[i].onclick = function() {

                for (var j = 0; j < lis.length; j++) {
                    lis[j].style.backgroundColor = '';
                }
                this.style.backgroundColor = 'red';
                var index = this.getAttribute('index');
                console.log(index);
                for (var i = 0; i < divs.length; i++) {
                    divs[i].style.display = 'none';
                }
                divs[index].style.display = 'block';
            }
        }
    </script>
</body>

</html>

同样的原理,只需要把搜索引擎的代码依次贴到items标签里面,就可以完成简单的聚合搜索啦~!看一下结果

<!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>Tab栏切换聚合搜索</title>
    <style>
        * {
            margin: 0;
            padding: 0;

        }

        .search_so {
            position: absolute;
            left: 225px;
            top: 10px;
            width: 760px;
            height: 75px;
        }

        .search_so .searlis {
            position: absolute;
            left: 105px;
            top: 13px;
            z-index: 10;
            cursor: pointer;
        }

        .search_so .searlis ul li {
            float: left;
            list-style: none;
            line-height: 23px;
            padding: 0 8px;
            margin-right: 6px;
            font-size: 14px;
            border-radius: 5px;
        }

        .search_so .searbd {
            position: absolute;
            left: 0;
            top: 10px;
        }

        .search_so .searbd .item {
            display: none;
        }

        .search_so .searbd img {
            float: left;
            width: 100px;
            height: 34px;
            margin-top: 25px;
        }

        .search_so .searbd input {
            float: left;
            width: 505px;
            height: 32px;
            text-indent: 10px;
            border: 2px solid #00a4ff;
            border-radius: 5px 0 0 5px;
            border-right: 0;
            margin: 32px 0 0 5px;
            font-size: 14px;
            color: #333;
        }

        .search_so .searbd button {
            float: left;
            width: 100px;
            height: 32px;
            font-size: 16px;
            color: #fff;
            background-color: #00a4ff;
            border: 2px solid #00a4ff;
            border-radius: 0 5px 5px 0;
            margin-top: 32px;
        }

        .search_so button:hover {
            background-color: #1aa6f1;
            color: rgb(252, 243, 243);
        }
    </style>
</head>

<body>
    <div class="search_so ">
        <div class="searlis ">
            <ul>
                <li style="background-color: #6699ff;color:#fff ">
                    百度
                </li>
                <li>谷歌
                </li>
                <li>知乎</li>
                <li>360</li>
                <li>必应</li>
                <li>雅虎</li>
                <li>搜狗</li>
                <li>B站</li>
                <li>淘宝</li>
                <li>图片</li>
            </ul>
        </div>
        <div class="searbd ">
            <div class="item " style="display: block; ">
                <form action="http://www.baidu.com/baidu " target="_blank ">
                    <a href="https://www.baidu.com "></a>
                    <input type="text " name="word" autocomplete="off ">
                    <button type="submit " value=" ">百度搜索</button>
                    <!-- 百度 -->
                </form>
            </div>
            <div class="item ">
                <form action="https://www.google.com.hk/search " target="_blank ">
                    <a href="https://www.google.com "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">谷歌搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://www.zhihu.com/search " target="_blank ">
                    <a href="https://www.zhihu.com "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">知乎搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://www.so.com/s " target="_blank ">
                    <a href="https://www.so.com "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">360搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <!--  -->
                <form action="https://cn.bing.com/search " target="_blank ">
                    <a href="https://cn.bing.com "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">必应搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://search.yahoo.com/search " target="_blank ">
                    <a href="https://search.yahoo.com "></a>
                    <input type="text " name="p" autocomplete="off ">
                    <button type="submit " value=" ">雅虎搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://www.sogou.com/web " target="_blank ">
                    <a href="https://www.sogou.com "></a>
                    <input type="text " name="query" autocomplete="off ">
                    <button type="submit " value=" ">搜狗搜索</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://search.bilibili.com/all " target="_blank ">
                    <a href="https://www.bilibili.com/ "></a>
                    <input type="text " name="keyword" autocomplete="off ">
                    <button type="submit " value=" ">bilibili</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://s.taobao.com/search " target="_blank ">
                    <a href="https://www.taobao.com/ "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">淘宝天猫</button>
                    <!--  -->
                </form>
            </div>
            <div class="item ">
                <form action="https://cn.bing.com/images/search " target="_blank " accept-charset="utf-8 "
                    method="get ">
                    <a href="https://image.baidu.com/ "></a>
                    <input type="text " name="q" autocomplete="off ">
                    <button type="submit " value=" ">图片搜索</button>
                    <!--  -->
                </form>
            </div>
        </div>
        <script>
            var lis = document.querySelector('.searlis').querySelectorAll('li');

            var tabd = document.querySelector('.searbd');
            var divs = tabd.querySelectorAll('.item');

            for (var i = 0; i < lis.length; i++) {
                lis[i].setAttribute('index', i); lis[i].onclick = function () {
                    for (var
                        j = 0; j < lis.length; j++) { lis[j].style.backgroundColor = ''; lis[j].style.color = "#333"; }
                    this.style.backgroundColor = '#6699ff'; this.style.color = "#fff"; var index = this.getAttribute('index');
                    for (var i = 0; i < divs.length; i++) { divs[i].style.display = 'none'; } divs[index].style.display = 'block'
                        ;
                }
            }</script>
    </div>
</body>

</html>
标签:
  • 评论列表
  •  wys
      2021-10-30 23:18:40  回复
  • 哇!感觉很实用,明儿我抄过去弄一个。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图