原生JS实现顶部导航栏显示按钮+搜索框功能

 更新时间:2019年12月25日 14:03:08   作者:藤藤呼啦啦  
这篇文章主要介绍了原生js实现顶部导航栏显示按钮+搜索框功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

根据点击导航栏,搜索框的内容会随之变动

话不多说,先上图

在这里插入图片描述
在这里插入图片描述

HTML代码段

<div class="bar">
      <ul id="menu" class="menu">
        <li class="active">搜店</li>
        <li class="gradient">地址</li>
        <li class="gradient">优惠券</li>
        <li class="gradient">全文</li>
        <li class="gradient">视频</li>
      </ul>
    </div>
    <div class="img_logo"></div>
    <div id="form">
      <form action="#">
        <input id="ins" class="text fl" type="text" value=""/>
        <input class="btn fr" type="submit" value=""/>
      </form>
    </div>

js代码段

var tabTit = document.getElementById('menu');
    var aLi = tabTit.getElementsByTagName('li');
    var oText = document.getElementById('ins');
    console.log("ee",oText)
    var arrText = [
      '例如:荷棠鱼坊烧鱼 或 樱花日本料理',
  '例如:一下雪北京就变成了北平',
  '例如:万达影院双人情侣券',
  '例如:微信可以评论表情包啦?',
  '例如:西安就变成了长安'
    ]
    for (var i = 0; i < aLi.length; i++) {
      var num = 0;
      oText.value=arrText[num];
      aLi[i].onclick = function(i){ 
        var num = i;
        // var iNow = i;
        return function(){
          for (var i = 0; i < aLi.length; i++) {
            aLi[i].className = 'gradient';
            oText.value = '';
            console.log('111')
          };
          aLi[num].className = 'active';
          oText.value=arrText[num];
          
          console.log("aa",oText.value)
        }
      }(i);
    };

总结

以上所述是小编给大家介绍的原生JS实现顶部导航栏显示按钮+搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

相关文章

  • window.onload追加函数使用示例

    window.onload追加函数使用示例

    这篇文章主要介绍了window.onload追加函数使用示例,需要的朋友可以参考下
    2014-03-03
  • html2canvas图片跨域问题图文详解

    html2canvas图片跨域问题图文详解

    我们在进行图片保存的时候经常会发现图片跨域了,下面下面这篇文章主要给大家介绍了关于html2canvas图片跨域问题的相关资料,需要的朋友可以参考下
    2023-03-03
  • js清理Word格式示例代码

    js清理Word格式示例代码

    这篇文章主要介绍了使用JS清理Word格式的方法,需要的朋友可以参考下
    2014-02-02
  • 关于Webpack dev server热加载失败的解决方法

    关于Webpack dev server热加载失败的解决方法

    下面小编就为大家分享一篇关于Webpack dev server热加载失败的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • JS如何定义用字符串拼接的变量

    JS如何定义用字符串拼接的变量

    这篇文章主要介绍了JS如何定义用字符串拼接的变量,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 基于javascript处理nginx请求过程详解

    基于javascript处理nginx请求过程详解

    这篇文章主要介绍了基于javascript处理nginx请求过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • 普通web整合quartz跑定时任务的示例

    普通web整合quartz跑定时任务的示例

    这篇文章主要介绍了普通web整合quartz跑定时任务,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • js实现漂亮的星空背景

    js实现漂亮的星空背景

    这篇文章主要为大家详细介绍了js实现漂亮的星空背景,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-11-11
  • 用js控制电灯开关

    用js控制电灯开关

    这篇文章主要为大家详细介绍了用js控制电灯开关,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • js 动态加载事件的几种方法总结

    js 动态加载事件的几种方法总结

    本篇文章主要是对js 动态加载事件的几种方法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12

最新评论