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

时间:2017-06-02 18:20:13

标签: javascript jquery html css

我正试图让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>

2 个答案:

答案 0 :(得分:0)

确保包含JS小提琴中的所有外部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>

enter image description here

UPD: 将您的<script type="text/javascript" src="javascript.js"></script>移至</body>之前的结尾。您的代码应在加载页面后执行。因此,更好地参与这样的相应事件:

$(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/

答案 1 :(得分:0)

您包含了jQuery,但您还需要包含jQuery UI。由于您正在使用google CDN for jQuery,因此您可以将相同的CDN用于jQuery UI。在jQuery脚本标记之后添加它。

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

您也可以在jquery.com https://code.jquery.com/ui/

上使用CDN