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

相关文章

  • web开发跨域原因的多种解决方案

    web开发跨域原因的多种解决方案

    我们在web项目开发中,经常会遇到各种跨域的问题,本文带你解决web开发中多种跨域原因的解决,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2021-09-09
  • 5个你不知道的JavaScript字符串处理库(小结)

    5个你不知道的JavaScript字符串处理库(小结)

    这篇文章主要介绍了5个你不知道的JavaScript字符串处理库,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • javascript实现控制文字大中小显示

    javascript实现控制文字大中小显示

    网页上可以自由改变字体大小是个非常有助于用户体验的小功能,现在许多网站上都有此功能,今天我们来简单实现下。
    2015-04-04
  • NodeJS框架Express的模板视图机制分析

    NodeJS框架Express的模板视图机制分析

    MVC模式可谓无人不知,它除了能增强团队协作的效率,还可方便产品的维护升级,本文我们将对Express框架的模板和视图(V)相关功能进行介绍。
    2011-07-07
  • Javascript计算两个marker之间的距离(Google Map V3)

    Javascript计算两个marker之间的距离(Google Map V3)

    做地图开发,最常用到的就是marker一些操作和交互。简单介绍一下,两个marker之间的距离计算,感兴趣的朋友可以参考下哈,希望对你有所帮助
    2013-04-04
  • js中less常用的方法小结

    js中less常用的方法小结

    下面小编就为大家带来一篇js中less常用的方法小结。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • JS实现可以用键盘方向键控制的动画

    JS实现可以用键盘方向键控制的动画

    这篇文章主要为大家详细介绍了JS实现可以用键盘方向键控制的动画,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • javascript如何创建对象

    javascript如何创建对象

    这篇文章主要为大家详细介绍了javascript创建对象的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 原生javascript获取元素样式属性值的方法

    原生javascript获取元素样式属性值的方法

    实际应用中, 获取元素样式在实际应用中一定常用到, 若是纯粹html中, 直接elem.style.attr就可获取, 但更多的时候我们是要从Css中获取元素的最终样式属性.
    2010-12-12
  • 禁用JavaScript控制台调试的方法

    禁用JavaScript控制台调试的方法

    这篇文章主要介绍了禁用JavaScript控制台调试的方法,需要的朋友可以参考下
    2014-03-03

最新评论