原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
根據(jù)點(diǎn)擊導(dǎo)航欄,搜索框的內(nèi)容會(huì)隨之變動(dòng)
話不多說(shuō),先上圖


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 = [
'例如:荷棠魚(yú)坊燒魚(yú) 或 櫻花日本料理',
'例如:一下雪北京就變成了北平',
'例如:萬(wàn)達(dá)影院雙人情侶券',
'例如:微信可以評(píng)論表情包啦?',
'例如:西安就變成了長(zhǎng)安'
]
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實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
關(guān)于Webpack dev server熱加載失敗的解決方法
下面小編就為大家分享一篇關(guān)于Webpack dev server熱加載失敗的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
基于javascript處理nginx請(qǐng)求過(guò)程詳解
這篇文章主要介紹了基于javascript處理nginx請(qǐng)求過(guò)程詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
普通web整合quartz跑定時(shí)任務(wù)的示例
這篇文章主要介紹了普通web整合quartz跑定時(shí)任務(wù),本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-03-03
js 動(dòng)態(tài)加載事件的幾種方法總結(jié)
本篇文章主要是對(duì)js 動(dòng)態(tài)加載事件的幾種方法進(jìn)行了詳細(xì)的總結(jié)介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-12-12

