根据点击导航栏，搜索框的内容会随之变动
话不多说，先上图
HTML代码段
<div> <ul> <li>搜店</li> <li>地址</li> <li>优惠券</li> <li>全文</li> <li>视频</li> </ul> </div> <div></div> <div> <form action="#"> <input type="text" value=""/> <input 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实现顶部导航栏显示按钮+搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
您可能感兴趣的文章: