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