时间:2021-05-25
根据点击导航栏,搜索框的内容会随之变动
话不多说,先上图
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实现顶部导航栏显示按钮+搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
这里实现的是进入页面后直接在导航栏上显示搜索框(包含右侧取消按钮),并弹出键盘且搜索框为直接可输入状态(第一响应者),点击右侧取消按钮后收起键盘并返回上一页。搜
当我们需要做一个类似顶部或底部导航栏公共组件的时候,单击某个导航栏按钮,跳转到另一个组件,并且改变导航栏按钮的样式,如果用跳转的时候,我们可以这样做,改变rou
本文实例为大家分享了原生js和jquery横向导航菜单的制作方法,供大家参考,具体内容如下原生javascript实现:这一次要实现的是鼠标放上去以后,菜单栏被
网站建设顶部导航栏都包含哪些内容呢?上海网站建设公司总结了一下,一般顶部导航栏从左到右顺序包含:公司logo、网页菜单、登录、搜索、提示消息、语言版本等。这些都
前言大部分情况下我们都是使用微信官方自带的navigationBar配置,但有时候我们需要在导航栏集成搜索框、自定义背景图、返回首页按钮等。思路隐藏官方导航栏获