突出顯示所選菜單項不起作用

我正在嘗試從JSFiddle獲得this snippet在我的網站上工作。我直接複製HTML，使用CSS內聯並將Javascript放入外部文件中。可悲的是，功能無法正常工作。您可以查看我在my test page上所做的工作。我沒有經歷過，所以對我做錯的任何建議都會非常有幫助。從我的測試頁突出顯示所選菜單項不起作用

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Javascript test</title> 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script type="text/javascript" src="javascript.js"></script> 

<style> 
body { 
    font-size: 0.8em; 
} 

/* jQuery UI theme settings */ 
.ui-menu .ui-menu-item { 
    margin: 1px 0; 
    border: 1px solid transparent; 
} 

.ui-menu .ui-menu-item a { 
    margin: 1px 0; 
    border: 1px solid transparent; 

} 

.ui-menu .ui-menu-item a.ui-state-highlight { 
    font-weight: normal; 
    margin: -1px; 
    color:red; 
} 

/* Demo settings */ 
#menu { 
    width: 30%; 
} 
</style> 



</head> 

<body> 
<ul id="menu"> 
    <li class="ui-state-disabled"><a href="#">Aberdeen</a> 
    </li> 
    <li><a href="#">Ada</a> 
    </li> 
    <li><a href="#">Adamsville</a> 
    </li> 
    <li><a href="#">Addyston</a> 
    </li> 
    <li> <a href="#">Delphi</a> 

     <ul> 
      <li class="ui-state-disabled"><a href="#">Ada</a> 
      </li> 
      <li><a href="#">Saarland</a> 
      </li> 
      <li><a href="#">Salzburg</a> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Saarland</a> 
    </li> 
    <li> <a href="#">Salzburg</a> 

     <ul> 
      <li> <a href="#">Delphi</a> 

       <ul> 
        <li><a href="#">Ada</a> 
        </li> 
        <li><a href="#">Saarland</a> 
        </li> 
        <li><a href="#">Salzburg</a> 
        </li> 
       </ul> 
      </li> 
      <li> <a href="#">Delphi</a> 

       <ul> 
        <li><a href="#">Ada</a> 
        </li> 
        <li><a href="#">Saarland</a> 
        </li> 
        <li><a href="#">Salzburg</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">Perch</a> 
      </li> 
     </ul> 
    </li> 
    <li class="ui-state-disabled"><a href="#">Amesville</a> 
    </li> 
</ul> 
</body> 
</html>

來源

2017-06-02 Kia

你檢查開發者控制檯？你正在加載'jquery.ui'lib嗎？ – doutriforce

原來的JFiddle使用JQuery2.0.2，而你似乎在使用JQuery1.6.1。 – sorayadragon

你忘記了包含Jquery UI。從這裏下載https://jqueryui.com/ – Lalit

確保包括從JS撥弄所有exnternal JS庫，你可以找到如下表。

對於特定的情況下，你可以將其像這樣：

<script 
    src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js" 
    integrity="sha256-lnH4vnCtlKU2LmD0ZW1dU7ohTTKrcKP50WA9fa350cE=" 
    crossorigin="anonymous"></script> 
    <script 
    src="https://code.jquery.com/jquery-2.0.2.min.js" 
    integrity="sha256-TZWGoHXwgqBP1AF4SZxHIBKzUdtMGk0hCQegiR99itk=" 
    crossorigin="anonymous"></script>

UPD：移動你<script type="text/javascript" src="javascript.js"></script>到最後，只是</body>之前。您的代碼應在加載頁面後執行。因此，它是更好的投入到corresponsing事件是這樣的：

$(document).ready(function() { 
    $("#menu").menu({ 

     select: function(e, ui) { 

      // Remove the highlight class from any existing items. 
      $(this).find("a.ui-state-highlight") 
        .removeClass("ui-state-highlight"); 

      // Adds the "ui-state-highlight" class to the selected item. 
      ui.item.find("> a") 
        .addClass("ui-state-highlight ui-corner-all");  

     } 

    }); 

});

UPD2：最後，包括jQueryUI的CSS文件：

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">

我建議你閱讀jQueryUI的一些入門教程理清這些問題：https://learn.jquery.com/jquery-ui/getting-started/

來源

2017-06-02 18:44:12

謝謝你。標題現在包含以下內容，但它仍然無效。有任何想法嗎？我試過你的確切的代碼片段也無濟於事。 ' ' – Kia

@Kia我已經更新了答案。請檢查。 –

您包含了jQuery，但您還需要包含jQuery UI。由於您使用的是針對jQuery的Google CDN，因此您可以將同一個CDN用於jQuery UI。在你的jQuery腳本標籤後添加這個。

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

您還可以使用CDN上jquery.com這裏https://code.jquery.com/ui/

來源

2017-06-02 18:59:34

謝謝你。標題現在包含以下內容，但它仍然無效。我使用了JSFiddle中使用的ui版本，並且嘗試了您使用的版本。可悲的是，都沒有工作。 ' ' – Kia

突出顯示所選菜單項不起作用

回答

相關問題