原生JS實現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
更新時間:2019年12月25日 14:03:08 作者:藤藤呼啦啦
這篇文章主要介紹了原生js實現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下
根據(jù)點擊導(dǎo)航欄,搜索框的內(nèi)容會隨之變動
話不多說,先上圖


HTML代碼段
<div class="bar">
<ul id="menu" class="menu">
<li class="active">搜店</li>
<li class="gradient">地址</li>
<li class="gradient">優(yōu)惠券</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 = [
'例如:荷棠魚坊燒魚 或 櫻花日本料理',
'例如:一下雪北京就變成了北平',
'例如:萬達(dá)影院雙人情侶券',
'例如:微信可以評論表情包啦?',
'例如:西安就變成了長安'
]
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);
};
總結(jié)
以上所述是小編給大家介紹的原生JS實現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
相關(guān)文章
關(guān)于Webpack dev server熱加載失敗的解決方法
下面小編就為大家分享一篇關(guān)于Webpack dev server熱加載失敗的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02

