如何使用導航欄觸發事件？

我一直在嘗試幾天。我想要做的是使用導航菜單中的選項，我必須在java腳本/ jquery中觸發onload事件。但是，這些事件並沒有發生。我嘗試過使用onselect和onclick，但無濟於事。該事件應該將數據帶入我的模板。也許我犯了一個錯誤，我只是不能看到。還是有另一種更好的方法來做到這一點？如何使用導航欄觸發事件？

這是我的導航欄。你可以看到我正在嘗試使用的onselect函數。

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="index.html">MEK Steel</a> 
     </div> 
     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li> 
        <a href="home.html">Home</a> 
       </li> 
       <li class="dropdown" > 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">About <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li> 
          <a href="about.html#about">About Us</a> 
         </li> 
         <li> 
          <a href="about.html#history">History</a> 
         </li> 
         <li> 
          <a href="about.html#privacyPolicy" >Privacy Policy</a> 
         </li> 
         <li> 
          <a href="about.html#termsAndConditions">Terms and Conditions</a> 
         </li> 
         <li> 
          <a href="about.html#disclaimer">Disclaimer</a> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown" class="active"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manufactured Products <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li onselect = "steelProducts()"> 
          <a href="steelProducts.html">Steel Products</a> 
         </li> 
         <li onselect = "steelDoors()"> 
          <a href="steelDoors.html">Steel Doors</a> 
         </li> 
         <li onselect="digitalSafes()"> 
          <a href="digitalSafes.html">Digital Safes</a> 
         </li > 
         <li onselect="securityEq()"> 
          <a href="securityEquipment.html">Security Equipment</a> 
         </li> 
         <li onselect="storageSol()"> 
          <a href="storageSolutions.html">Storage Solutions</a> 
         </li> 
         <li onselect="steelFur()"> 
          <a href="steelFurniture.html">Steel Furniture</a> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="services.html">Services</a> 
       </li> 
       <li> 
        <a href="contact.html">Contact</a> 
       </li> 
      </ul> 
     </div> 
     <!-- /.navbar-collapse --> 
    </div> 
    <!-- /.container --> 
</nav>

這是我的javascript。我只寫用於測試目的

function showTemplate(template, data){ 
var html = template(data); 
console.log(html); 
$('#content').html(html); 
}  
function securityEq(){ 
source = $("#productsTemplate").html(); 
secEqTemp = Handlebars.compile(source); 
showTemplate(secEqTemp, data); 
}

來源

2016-08-17 spetiwala

嘗試把你所做的所有事情都放在FiddleJS中，然後在這裏發佈。 – Cagy79

哪裏使用這些函數steelProducts（）等？ –

'''標籤在'onselect'可以做任何事情之前就是行動。你究竟想在這裏完成什麼？ – Chax

你解釋你試圖做

@Chax後即時通訊嘗試的onselect工作之前的標籤。就像我想加載數據並將其放入我的模板然後顯示頁面一樣。

我想出了這個代碼

$(document).ready(function(){ 
 
    $('a').click(function(){ // Bind a click event to my <a> tag 
 
    var linkValue = $(this).attr('data-link'); // Retreive the value of data-link aka where we want to go 
 
    // Do something, your logic 
 
    
 
    
 
    window.location.href = linkValue; // Load the new page 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-link="http://www.google.com">I'm a link</a> 
 
<!-- Notice that the tag below doesn't have a href attribute but does have a data-link attribute-->

這段代碼的含義很簡單。我們將一個點擊事件綁定到DOM中的每個<a>標籤上。當我們的標籤被點擊時，我們執行該功能。請注意，您可以使用switch來區分按鈕。然後我們調用window對象，並使其呼叫我們想要的頁面。

來源

2016-08-18 12:43:15 Chax

$(document).ready(function() { 
    $('a').on('click', function(){ 
    alert($(this).html()); 
    }); 
});

您需要引用錨，而不是列表的標籤之一。

Fiddle

來源

2016-08-17 13:31:35

正確，簡單 – Chax

-1

檢查這個jsfiddle當我把使用<script>的HTML裏面的js代碼它的工作原理和事件被觸發

來源

2016-08-18 09:56:11

如何使用導航欄觸發事件？

回答

相關問題