仿猎手导航头部效果的轻量网址导航（适合手机端）

天空宫阙

# 起因
特别喜欢猎手导航头部搜索的效果，输入一次关键词后，可以用不同的搜索引擎反复搜索。
解决了搜索时同一关键词反复输入的痛点。

但是猎手导航没有针对手机端的网页，pc端的网页在手机端展示不是很完整。由于我只需要头部（top）部分的效果，我把这部分重新写了一个适合手机端访问的样式。


# 效果

## 体验地址(手机端效果更佳，不兼容IE) http://154.8.167.43  （如果访问不通就是服务器到期了）

如下图所示输入关键词后，右侧的每一个按钮都相对于搜索键
搜索未果可以后退后点击其他按钮进行相同关键词的搜索
左侧为类别选项卡



# 核心文件
index.html，单文件可离线使用

JavaScript部分代码

[JavaScript] 纯文本查看 复制代码

; $(document).ready(function () {
            // 默认显示第一个
            ; $('.items div').hide()
                ; $(`.items div:eq(0)`).show()
                ; $('.category_div span:eq(0)').css('background', '#c81623')

                // 监听选项卡点击
                ; $(".category_div span").click(function () {
                    ; $('.category_div span').css('background', 'black')
                        ; $(this).css('background', '#c81623')
                        // $(this).index() 获取元素的索引
                        ; $('.items div').hide()
                        ; $(`.items div:eq(${$(this).index()})`).show()
                })

            // href复制一份到id
            var all_hrefs = $('a')
            for (i = 0; i < all_hrefs.length; i++) {
                all_hrefs[i].id = all_hrefs[i].href
                // 全部新窗口打开
                all_hrefs[i].target = '_blank'
            }

            // 监听input内容改变 改变全部href
            ; $("#key_value").bind("input propertychange", function (event) {
                // console.log($("#key_value").val())
                var all_hrefs = $('a')
                for (i = 0; i < all_hrefs.length; i++) {
                    all_hrefs[i].href = all_hrefs[i].id +encodeURIComponent($("#key_value").val())
                }
            })

            // 监听a标签链接点击
            ; $(".container .items span a").click(function () {
                ; $(this).css('text-decoration', 'line-through')       
                })

        })

# 核心实现方式
监听input内容改变

[JavaScript] 纯文本查看 复制代码

; $("#key_value").bind("input propertychange", function (event) {
                 console.log($("#key_value").val())
                 //改变所有a标签的href值
                 //..........
                }
            })

# 扩展方式

添加一个新的网址如百度可以在".items div"下添加一个

[XHTML] 纯文本查看 复制代码

<span><a href="https://www.baidu.com/s?word=">百度</a></span>

添加一个新的类别如“综合”可在".category_div"下添加一个

[XHTML] 纯文本查看 复制代码

<span class="category">综合</span>

并在对应".items div"至少添加一个网址
保证class="category_div"下的span标签数（类别数）和class="items" 下的div标签数（类别详情）对应即可。item-1,2,3等class没有用到扩展时可以不用顾忌顺序。

# 开源地址
https://github.com/skygongque/web-navigation-imitating-lsdhss-top
如果只想本地试一下，index.html单文件浏览器打开即可
求star

# 直接下载
仿猎手头部.zip (7.04 KB, 下载次数: 13)

2020-4-24 16:20 上传

点击文件名下载附件

# 问题
搜索结果有些网站不支持手机UA,有些尚未修改为手机端的请求，所以部分网站的搜索结果页面仍然是pc端的
，以及部分网站的不能成功携带搜索关键词


如果觉得还不错的话求免费的评分

东方星雨

额，电脑访问，那叫一个惨不忍睹，为啥不做成自适应的呢？

天空宫阙

东方星雨 发表于 2020-4-24 16:32
额，电脑访问，那叫一个惨不忍睹，为啥不做成自适应的呢？

首先我不会，其次电脑端原来的猎手导航已经做得很好了，感觉再怎么也超越不了就不做了；也想过如果是pc访问就重定向到猎手导航但是它上面有一个很大的轮播图有广告就算了。

天空宫阙

用了flex布局我很好奇IE10以下浏览器是怎么样的

xuegaoxiansen

东方星雨 发表于 2020-4-24 16:32
额，电脑访问，那叫一个惨不忍睹，为啥不做成自适应的呢？

打开画面让我瞬间宁静