我正在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/

10-12 12:54
查看更多