如何原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能

這篇文章主要介紹了如何原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

根據(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 = [
      '例如：荷棠魚坊燒魚 或 櫻花日本料理',
  '例如：一下雪北京就變成了北平',
  '例如：萬(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);
    };

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何原生JS實(shí)現(xiàn)頂部導(dǎo)航欄顯示按鈕+搜索框功能”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!