根据点击导航栏，搜索框的内容会随之变动
话不多说，先上图
HTML代码段
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实现顶部导航栏显示按钮+搜索框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对考高分网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
