原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
根據(jù)點(diǎn)擊導(dǎo)航欄,搜索框的內(nèi)容會(huì)隨之變動(dòng)
話不多說,先上圖
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á)影院雙人情侶券', '例如:微信可以評(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ì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
如果你覺得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
相關(guān)文章
5個(gè)你不知道的JavaScript字符串處理庫(小結(jié))
這篇文章主要介紹了5個(gè)你不知道的JavaScript字符串處理庫,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06javascript實(shí)現(xiàn)控制文字大中小顯示
網(wǎng)頁上可以自由改變字體大小是個(gè)非常有助于用戶體驗(yàn)的小功能,現(xiàn)在許多網(wǎng)站上都有此功能,今天我們來簡(jiǎn)單實(shí)現(xiàn)下。2015-04-04Javascript計(jì)算兩個(gè)marker之間的距離(Google Map V3)
做地圖開發(fā),最常用到的就是marker一些操作和交互。簡(jiǎn)單介紹一下,兩個(gè)marker之間的距離計(jì)算,感興趣的朋友可以參考下哈,希望對(duì)你有所幫助2013-04-04JS實(shí)現(xiàn)可以用鍵盤方向鍵控制的動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)可以用鍵盤方向鍵控制的動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-12-12禁用JavaScript控制臺(tái)調(diào)試的方法
這篇文章主要介紹了禁用JavaScript控制臺(tái)調(diào)試的方法,需要的朋友可以參考下2014-03-03