原生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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
基于JQuery的模拟苹果桌面Dock效果(稳定版)
Oct 15 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
如何理解jQuery中的ajaxSubmit方法
Mar 13 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
jQuery源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
vue.js提交按钮时进行简单的if判断表达式详解
Aug 08 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
Vue基础配置讲解
Nov 29 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 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
AM/FM收音机的安装与调试
2021/03/02 无线电
使用Apache的rewrite技术
2006/06/22 PHP
php设计模式 Interpreter(解释器模式)
2011/06/26 PHP
微信公众平台开发关注及取消关注事件的方法
2014/12/23 PHP
PHP实现的多文件上传类及用法示例
2016/05/06 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
js window.onload 加载多个函数的方法
2009/11/02 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js实现双击图片放大单击缩小的方法
2015/02/17 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
关于vue-router的那些事儿
2018/05/23 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
js getBoundingClientRect使用方法详解
2019/07/17 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
JS删除对象中某一属性案例详解
2020/09/08 Javascript
Python中的lstrip()方法使用简介
2015/05/19 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
python flask实现分页的示例代码
2018/08/02 Python
Django自定义用户表+自定义admin后台中的字段实例
2019/11/18 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
Python处理PDF与CDF实例
2020/02/26 Python
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
同学聚会主持词
2014/03/18 职场文书
初中三好学生自我鉴定
2014/04/07 职场文书
个人总结与自我评价
2015/02/14 职场文书
2015年售票员工作总结
2015/04/29 职场文书
小学班长竞选稿
2015/11/20 职场文书