突出显示所选菜单项不起作用

Question

I am trying to get this snippet from JSFiddle working on my site. 我正在尝试从JSFiddle上获取此片段，并在我的网站上工作。 I copied the HTML directly, used the CSS inline and put the Javascript in an external file. 我直接复制了HTML，使用CSS内联并将Javascript放在了外部文件中。 Sadly, the functionality isn't working. 可悲的是，该功能无法正常工作。 You can view what I've done on my test page . 您可以在测试页上查看我所做的事情。 I'm not experienced so any advice as to what I'm doing wrong would be very helpful. 我没有经验，所以任何有关我做错事情的建议都将非常有帮助。

Code from 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>

Answer 1

Make sure to include all exnternal JS libraries from JS fiddle, you can find list as shown below. 确保包括JS小提琴中的所有外部JS库，您可以找到如下所示的列表。

For the specific case you can include it like this: 对于特定情况，您可以像这样包含它：

<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: Move your <script type="text/javascript" src="javascript.js"></script> to the end, just before </body> . UPD：将您的<script type="text/javascript" src="javascript.js"></script>移到末尾，即</body>之前。 Your code should be executed after loading of the page. 您的代码应在页面加载后执行。 So it's even better to put in to corresponsing event like this: 因此，最好参加这样的对应事件：

$(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: And finally, include JQueryUI CSS file: UPD2：最后，包括JQueryUI CSS文件：

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

I recommend you to read some Getting Started tutorial for JQueryUI to sort out such issues: https://learn.jquery.com/jquery-ui/getting-started/ 我建议您阅读一些有关JQueryUI的入门教程，以解决此类问题： https : //learn.jquery.com/jquery-ui/getting-started/

Answer 2

You included jQuery, but you also need to include jQuery UI. 您包括了jQuery，但还需要包括jQuery UI。 Since you're using the google CDN for jQuery, you can use that same CDN for jQuery UI. 由于您将Google CDN用于jQuery，因此可以将同一CDN用于jQuery UI。 Add this after your jQuery script tag. 在您的jQuery脚本标签之后添加此标签。

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

You can also use the CDN on jquery.com here https://code.jquery.com/ui/ 您也可以在jquery.com上使用CDN，网址为https://code.jquery.com/ui/

突出显示所选菜单项不起作用

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-06-02 18:44:12

解决方案2
0 2017-06-02 18:59:34

突出显示所选菜单项不起作用

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-06-02 18:44:12

解决方案2 0 2017-06-02 18:59:34

解决方案1
0 已采纳 2017-06-02 18:44:12

解决方案2
0 2017-06-02 18:59:34