原生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á)影院雙人情侶券', '例如:微信可以評論表情包啦?', '例如:西安就變成了長安' ] 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)航欄顯示按鈕+搜索框功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對我們網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
欄 目:JavaScript
下一篇:Vue組件通信入門之Provide和Inject機(jī)制
本文標(biāo)題:原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能
本文地址:http://mengdiqiu.com.cn/a1/JavaScript/9382.html
您可能感興趣的文章
- 04-02java后端代碼分頁 java后端實(shí)現(xiàn)分頁page
- 01-10Echarts實(shí)現(xiàn)單條折線可拖拽效果
- 01-10在Vue項(xiàng)目中使用Typescript的實(shí)現(xiàn)
- 01-10js實(shí)現(xiàn)上傳圖片并顯示圖片名稱
- 01-10Vue中使用Lodop插件實(shí)現(xiàn)打印功能的簡單方法
- 01-10echarts實(shí)現(xiàn)折線圖的拖拽效果
- 01-10d3.js實(shí)現(xiàn)圖形縮放平移
- 01-10小程序簡單兩欄瀑布流效果的實(shí)現(xiàn)
- 01-10H5實(shí)現(xiàn)手機(jī)拍照和選擇上傳功能
- 01-10Echarts實(shí)現(xiàn)多條折線可拖拽效果


閱讀排行
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 01-11ajax實(shí)現(xiàn)頁面的局部加載
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-10C#中split用法實(shí)例總結(jié)
- 04-02jquery與jsp,用jquery
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 01-10delphi制作wav文件的方法
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改