原生JS实现顶部导航栏显示按钮+搜索框功能
(编辑:jimmy 日期: 2024/12/27 浏览:3 次 )
根据点击导航栏,搜索框的内容会随之变动
话不多说,先上图
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实现顶部导航栏显示按钮+搜索框功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!
下一篇:jQuery+PHP+Ajax实现动态数字统计展示功能