我正在asp.net中开发一个mvc webapp,但是我的滑块不起作用。当我使用html尝试相同的代码时,它是有效的。这是我的代码
<head>
<link href="~/Content/css/materialize.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slider({ full_width: true });
});
</script>
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img class="responsive-img" src="~/Content/img/hotel1.jpeg" />
</li>
<li>
<img class="responsive-img" src="~/Content/img/hotel2.jpeg" />
</li>
</ul>
</div>
</body>
当我使用Chrome开发工具检查代码时,上面写着
Uncaught TypeError: $(...).slider is not a function
还有
Uncaught ReferenceError: $ is not defined(anonymous function) @ materialize.min.js:6
最佳答案
问题是你的脚本标签你的脚本应该像这样在你的页面底部
<head>
<link href="~/Content/css/materialize.min.css" rel="stylesheet" />
</head>
<body>
<div class="slider">
<ul class="slides">
<li>
<img class="responsive-img" src="~/Content/img/hotel1.jpeg" />
</li>
<li>
<img class="responsive-img" src="~/Content/img/hotel2.jpeg" />
</li>
</ul>
</div>
<script type="text/javascript" src="~/Content/jquery/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="~/Content/js/materialize.min.js"></script>
<script>
$(document).ready(function () {
$('.slider').slider({ full_width: true });
});
</script>
</body>
关于jquery - 物化滑块在ASP.NET MVC中不起作用,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/39825408/