原生JS实现顶部导航栏显示按钮+搜索框功能       这篇文章主要介绍了原生js实现顶部导航栏显示按钮+搜索框功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

话不多说，先上图

HTML代码段

 div 
 ul id="menu" 
 li 搜店 /li 
 li 地址 /li 
 li 优惠券 /li 
 li 全文 /li 
 li 视频 /li 
 /ul 
 /div 
 div /div 
 div id="form" 
 form action="#" 
 input id="ins" 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实现顶部导航栏显示按钮+搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！