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


Posted in Javascript onDecember 25, 2019

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

话不多说,先上图

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

Javascript 相关文章推荐
Javascript动态引用CSS文件的2种方法介绍
Jun 06 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
uploadify多文件上传参数设置技巧
Nov 16 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
JS验证input输入框(字母,数字,符号,中文)
Mar 23 Javascript
单行 JS 实现移动端金钱格式的输入规则
May 22 Javascript
jquery在vue脚手架中的使用方式示例
Aug 29 jQuery
详解vue2 $watch要注意的问题
Sep 08 Javascript
详解.vue文件中style标签的几个标识符
Jul 17 Javascript
手把手15分钟搭一个企业级脚手架
Sep 16 Javascript
通过实例解析js可枚举属性与不可枚举属性
Dec 02 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 #jQuery
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 #Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 #Javascript
如何基于JS截获动态代码
Dec 25 #Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 #Javascript
vue远程加载sfc组件思路详解
Dec 25 #Javascript
node实现mock-plugin中间件的方法
Dec 25 #Javascript
You might like
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
详解PHP版本兼容之openssl调用参数
2018/07/25 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
jquery解析XML及获取XML节点名称的实现代码
2016/05/18 Javascript
Google 地图叠加层实例讲解
2016/08/06 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
2017/10/24 Javascript
jQuery图片查看插件Magnify开发详解
2017/12/25 jQuery
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
详解NodeJS Https HSM双向认证实现
2019/03/12 NodeJs
Vue源码学习之关于对Array的数据侦听实现
2019/04/23 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
js实现烟花特效
2020/03/02 Javascript
浅谈vue项目,访问路径#号的问题
2020/08/14 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Python基于动态规划算法解决01背包问题实例
2017/12/06 Python
利用Python实现微信找房机器人实例教程
2019/03/10 Python
记一次Django响应超慢的解决过程
2020/09/17 Python
python产生模拟数据faker库的使用详解
2020/11/04 Python
Python面试题集
2012/03/08 面试题
高三政治教学反思
2014/02/06 职场文书
入职担保书范文
2014/05/21 职场文书
要账委托书范本
2014/09/15 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
入党函调证明材料
2014/12/24 职场文书
单位委托函范文
2015/01/29 职场文书
大学生个人学年总结
2015/02/15 职场文书
Python利用FlashText算法实现替换字符串
2022/03/31 Python
mysql 索引的数据结构为什么要采用B+树
2022/04/26 MySQL
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL