原生JS实现顶部导航栏显示按钮+搜索框功能

根据点击导航栏，搜索框的内容会随之变动话不多说，先上图HTML代码段<divclass="bar"><

根据点击导航栏，搜索框的内容会随之变动

话不多说，先上图

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实现顶部导航栏显示按钮+搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！ 如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

js 顶部导航栏 js搜索框