這篇文章主要介紹了如何原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯(lián)公司專注于洛龍網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供洛龍營銷型網(wǎng)站建設(shè),洛龍網(wǎng)站制作、洛龍網(wǎng)頁設(shè)計(jì)、洛龍網(wǎng)站官網(wǎng)定制、小程序開發(fā)服務(wù),打造洛龍網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供洛龍網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
根據(jù)點(diǎn)擊導(dǎo)航欄,搜索框的內(nèi)容會隨之變動
先上圖
HTML代碼段
- 搜店
- 地址
- 優(yōu)惠券
- 全文
- 視頻
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); };
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“如何原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能”這篇文章對大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學(xué)習(xí)!