原生JS實現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
更新時間:2019年12月25日 14:03:08 作者:藤藤呼啦啦
這篇文章主要介紹了原生js實現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能,本文通過實例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
根據(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 = [ '例如:荷棠魚坊燒魚 或 櫻花日本料理', '例如:一下雪北京就變成了北平', '例如:萬達影院雙人情侶券', '例如:微信可以評論表情包啦?', '例如:西安就變成了長安' ] 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)文章
5個你不知道的JavaScript字符串處理庫(小結(jié))
這篇文章主要介紹了5個你不知道的JavaScript字符串處理庫,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06Javascript計算兩個marker之間的距離(Google Map V3)
做地圖開發(fā),最常用到的就是marker一些操作和交互。簡單介紹一下,兩個marker之間的距離計算,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04