原生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 instanceof 与typeof使用说明
Jan 11 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
Oct 18 Javascript
js 数据类型转换总结笔记
Jan 17 Javascript
js+ajax实现获取文件大小的方法
Dec 08 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
微信小程序 wxapp视图容器 view详解
Oct 31 Javascript
jQuery学习笔记之入门
Dec 14 Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
JS PHP字符串截取函数实现原理解析
Aug 29 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
一个改进的UBB类
2006/10/09 PHP
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
php检测iis环境是否支持htaccess的方法
2014/02/18 PHP
如何使用PHP给图片加水印
2016/10/12 PHP
php微信公众号开发之现金红包
2018/04/16 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
解决jquery的datepicker的本地化以及Today问题
2012/05/23 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
JavaScript之Object类型介绍
2015/04/01 Javascript
javascript中字体浮动效果的简单实例演示
2015/11/18 Javascript
JavaScript电子时钟倒计时第二款
2016/01/10 Javascript
基于jQuery实现仿搜狐辩论投票动画代码(附源码下载)
2016/02/18 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
微信小程序 加载 app-service.js 错误解决方法
2016/10/12 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
2017/08/09 Javascript
Vue集成Iframe页面的方法示例
2017/12/12 Javascript
学习 Vue.js 遇到的那些坑
2021/02/02 Vue.js
Python提取Linux内核源代码的目录结构实现方法
2016/06/24 Python
python在非root权限下的安装方法
2018/01/23 Python
Sanic框架应用部署方法详解
2018/07/18 Python
python 实现selenium断言和验证的方法
2019/02/13 Python
NumPy 数组使用大全
2019/04/25 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
pytorch AvgPool2d函数使用详解
2020/01/03 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
人事行政主管岗位职责
2013/12/22 职场文书
经典婚礼主持开场白
2014/03/13 职场文书
一分钟演讲稿
2014/04/30 职场文书
结对共建协议书
2014/08/20 职场文书
关于青春的演讲稿三分钟
2014/08/22 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
入党申请书怎么写?
2019/06/21 职场文书
python机器学习Github已达8.9Kstars模型解释器LIME
2021/11/23 Python