如何僅使用javascript代碼創建菜單

自從我開始在NetBeans上編程時，我必須爲每個使用的頁面創建一個HTML菜單，這開始非常耗時，因爲如果我有很多頁面，必須返回並編輯每個更新。這是我的菜單如何看待與HTML的時刻：如何僅使用javascript代碼創建菜單

  <ul class="sidebar-menu"> 
      <li class="header">MAIN NAVIGATION</li> 
      <li class="treeview active"> 
      <a href="#"> 
       <i class="fa fa-edit"></i> <span>Projects</span> 
       <i class="fa fa-angle-left pull-right"></i> 
      </a> 
      <ul class="treeview-menu"> 
       <li class="active"><a href="offers.html"><i class="fa fa-circle-o"></i>Offers</a></li> 
       <li class="active"><a href="mobilecarriers.html"><i class="fa fa-circle-o"></i>Mobile Carriers</a></li> 
       <li class="active"><a href="affiliatepixel.html"><i class="fa fa-circle-o"></i>Affiliate Pixel Tracking</a></li> 
       <li class="active"><a href="carrierip.html"><i class="fa fa-circle-o"></i>Carrier IP</a></li> 
       <li class="active"><a href="UpdtConvStats.html"><i class="fa fa-circle-o"></i>Update Conversion Status</a></li> 
       <li class="active"><a href="GetConvData.html"><i class="fa fa-circle-o"></i>Get Conversions Data</a></li> 
       <li class="active"><a href="UpdtConv.html"><i class="fa fa-circle-o"></i>Update Conversions P/R</a></li> 
      </ul> 
      </li> 
     </ul>

現在，爲了避免在所有頁面重複菜單，我想創建一個只使用Javascript代碼的菜單。我已經試圖建立起來，但它並不完全達到我所瞄準的目標;例如：我需要在文本前面有圖標，並且它顯示的是所有這些圖標的DOT，我還需要創建子菜單，但我還沒有完全找到一種方法來實現它。任何人都可以告訴我，如果這段代碼適用於我的目的？如果沒有，任何人都可以幫助我嗎？

(function(){ 

var dirs=window.location.href.split('/'), 
cdir=dirs[dirs.length-2]; 

var dir_ofertas = ""; 
var dir_teste = ""; 

if (cdir === "Ofertas") { 
    dir_teste = '../teste/';  
} 

else if (cdir === "teste") { 
    dir_ofertas = '../Ofertas/';   
} 
var navItems = [ 
    {href: dir_ofertas + 'offers.html', text: 'Offers'}, 
    {href: dir_ofertas + 'mobilecarriers.html', text: 'Mobile Carriers'}, 
    {href: dir_teste + 'index.html', text: 'Test'} 
]; 

var navElem = document.createElement("nav"), 
    navList = document.createElement("ul"), 
    navItem, navLink; 

navElem.appendChild(navList); 

for (var i = 0; i < navItems.length; i++) { 
    navItem = document.createElement("li"); 
    navLink = document.createElement("a"); 
    navLink.href = navItems[i].href; 
    navLink.innerHTML = navItems[i].text; 
    navItem.appendChild(navLink); 
    navList.appendChild(navItem); 
} 
navList.children[0].className = "current"; 

window.onload = function() { 
    document.getElementById('leftNav').appendChild(navElem); 
}; 

}());

來源

2016-06-07 wickenex

可以使用.innerHtml或.html（jQuery的）注入到HTML文檔例如

你可以做代碼，通過雲和生成HTML然後將其注入到一個頁面（這對於網頁？或應用程序？）

現在問題與上述方法是CSS將無法正確工作有時。

最後，我會建議尋找php。在一個項目中，我用php調用了一個python腳本，它的輸出是一個下拉菜單，製作了我擁有的所有項目的動態下拉菜單。

編輯：忘了問，這是一次性的事情嗎？生成菜單，還是需要在運行中重新生成？

來源

2016-06-08 12:16:44

這是一個網頁，我必須獨家使用Javascript。一旦你打開一個頁面，菜單需要重新生成。 – wickenex

好吧，我會百分之百地使用Jquerry和正則表達式。如果使用java腳本獲取相關變量並創建html代碼字符串（如var a =「

我建議你使用jQuery;它使得所有的JavaScript生成的網頁內容更容易和可讀，再加上不難學習。舉個例子，你可以爲

myButton.addClass('red'); 
myButton.append('myMenu');

因此建立在DOM

var myButton=$('<div class="button">ventas</div>');

你可以讓任何jQuery的操作要使用此之前就存在，他們是包含所有的DOM元素的對象，例如，你可以做一個功能，將json轉換成菜單

menu=[ 
    { 
    name:"inicio", 
    url:"http://www.cl" 
    } 
]

等等。只是一個想法。那麼你的對象結構可能看起來像

myMenu=[ 
    { 
     name:"inicio", 
     $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'); 
    }, 
    { 
     name:"cuenta", 
     $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'), 
     children=[ 

      { 
      name:"password", 
      $element=('<div id="menu-inicio-0" class="top-menu">inicio</div>'), 
     }, 
     {...} 

     ] 
    } 
]

在jQuery中，您可以添加點擊監聽到每一個元素，正如所說，即使使用它攜帶的變量，沒有ID前添加到DOM（僅當參考元素或類呼叫）

for each button{ 
    $thisButton.on("click",function(){ 
     showSubMenuOrFollowLink(); 
    }); 
}

你可以採取類似的方法與香草javascript，但當然這是更難。總而言之，我建議您探索每個按鈕都有對象的可能性，這些對象都有DOM元素作爲變量，因此您可以輕鬆地引用它們。

希望這有助於！

來源

2016-06-08 12:22:58 Joaquin

如何僅使用javascript代碼創建菜單

回答

相關問題