選択したメニュー項目をハイライト表示しない

私のサイトで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

をCDNを使用することができます

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

あなたはDEVコンソールを確認しましたか？ '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を：ちょうど</body>前に、あなたの<script type="text/javascript" src="javascript.js"></script>末尾に移動。あなたのコードは、ページの読み込み後に実行する必要があります。だから、このようなイベントを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を使用しているので、jQuery UI用に同じCDNを使用できます。これをjQueryスクリプトタグの後に追加します。あなたがここにもjquery.comにhttps://code.jquery.com/ui/

出典

2017-06-02 18:59:34

ありがとうございます。ヘッダーには次のものが含まれていますが、それでも機能しません。私は、JSFiddleで使用されているUIバージョンを使用し、あなたが使用したバージョンも試しました。残念ながら、どちらもうまくいきませんでした。 ' – Kia

選択したメニュー項目をハイライト表示しない

答えて

関連する問題