原生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 相关文章推荐
如何取得中文输入的真实长度?
Jun 24 Javascript
javascript prototype 原型链
Mar 12 Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 Javascript
浅析Javascript使用include/require
Nov 13 Javascript
js 判断浏览器使用的语言示例代码
Mar 22 Javascript
jquery实现树形菜单完整代码
Dec 29 Javascript
微信JSAPI Ticket接口签名详解
Jun 28 Javascript
简单实现js鼠标跟随效果
Aug 02 Javascript
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
详解React 在服务端渲染的实现
Nov 16 Javascript
vue踩坑记-在项目中安装依赖模块npm install报错
Apr 02 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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
我的论坛源代码(一)
2006/10/09 PHP
php自动适应范围的分页代码
2008/08/05 PHP
PHP 第二节 数据类型之数值型
2012/04/28 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
给大家分享几个常用的PHP函数
2017/01/15 PHP
JavaScript 错误处理与调试经验总结
2010/08/10 Javascript
关于跨站脚本攻击问题
2011/12/22 Javascript
Vue.js中数组变动的检测详解
2016/10/12 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
jquery.flot.js简单绘制折线图用法示例
2017/03/13 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
微信小程序 新建登录页并实现tabBar隐藏
2017/06/13 Javascript
bootstrap table方法之expandRow-collapseRow展开或关闭当前行数据
2020/08/09 Javascript
在小程序中集成redux/immutable/thunk第三方库的方法
2018/08/12 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python实现文件分组复制到不同目录的例子
2014/06/04 Python
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
详解python的数字类型变量与其方法
2016/11/20 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python实现快速计算词频功能示例
2018/06/25 Python
Python中的groupby分组功能的实例代码
2018/07/11 Python
一行代码让 Python 的运行速度提高100倍
2018/10/08 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
Python利用PyExecJS库执行JS函数的案例分析
2019/12/18 Python
医疗保健专业人士购物网站:Scrubs & Beyond
2017/02/08 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
《将心比心》教学反思
2014/04/08 职场文书
药品业务员岗位职责
2014/04/17 职场文书
岗位工作说明书
2014/07/29 职场文书
2014年团队工作总结
2014/11/24 职场文书
首次购房证明
2015/06/19 职场文书