$(...).tabs() 不是使用 Spring MVC 和 jQuery 3.1.0 的函数
$(...).tabs() is not a function using Spring MVC and jQuery 3.1.0
我是 运行 一个使用 Spring MVC 的本地门户网站,我很难让 jQuery 选项卡正常工作。我总是得到错误 $(...).tabs() is not a function
.
这是我的 jsp:
<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<spring:url value="/resources/css/style.css" var="css" />
<spring:url value="/resources/js/main.js" var="js" />
<link rel='stylesheet' type='text/css' href="${css}">
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="${js}"></script>
<title>Title</title>
</head>
<body>
<h1>Title</h1>
<div id="tabs">
<ul>
<li><a href='#current-projects'>Current Projects</a></li>
<li><a href='#our-vision'>Our Vision</a></li>
<li><a href='#description'>About Us</a></li>
</ul>
<div id='current-projects' class='skill-block'>
<h2>Current Projects</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Broadway</li>
<li>MOVE</li>
</ul>
</p>
</div>
<div id='our-vision' class='skill-block'>
<h2>Our Vision</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Password Validator</li>
<li>Whale Talk</li>
</ul>
</p>
</div>
<div id='description' class='skill-block'>
<h2>About Us</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Coming soon...</li>
</ul>
</p>
</div>
</div>
</body>
</html>
这是我的 main.js(请注意,所有其他 jQuery 功能都有效,只是 tabs() 有错误):
(function() {
$(document).ready(function() {
$('#tabs').tabs();
$('.projects').hide();
$('.projects-button').on('click', function(){
var button = $(this);
button.next().slideToggle(400);
button.toggleClass('active');
button.text(button.hasClass('active') ? 'Hide' : 'Show');
})
});
})();
我也试过下载 jQuery 文件在本地加载它,但出现同样的错误。
.tabs()
是一个 jquery ui 函数 .. 你需要包含 jquery ui .. 所以在 include [=23 行之后=] 插入这一行
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
(function() {
$(document).ready(function() {
$('#tabs').tabs();
$('.projects').hide();
$('.projects-button').on('click', function(){
var button = $(this);
button.next().slideToggle(400);
button.toggleClass('active');
button.text(button.hasClass('active') ? 'Hide' : 'Show');
})
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<h1>Title</h1>
<div id="tabs">
<ul>
<li><a href='#current-projects'>Current Projects</a></li>
<li><a href='#our-vision'>Our Vision</a></li>
<li><a href='#description'>About Us</a></li>
</ul>
<div id='current-projects' class='skill-block'>
<h2>Current Projects</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Broadway</li>
<li>MOVE</li>
</ul>
</p>
</div>
<div id='our-vision' class='skill-block'>
<h2>Our Vision</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Password Validator</li>
<li>Whale Talk</li>
</ul>
</p>
</div>
<div id='description' class='skill-block'>
<h2>About Us</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Coming soon...</li>
</ul>
</p>
</div>
</div>
我是 运行 一个使用 Spring MVC 的本地门户网站,我很难让 jQuery 选项卡正常工作。我总是得到错误 $(...).tabs() is not a function
.
这是我的 jsp:
<!DOCTYPE html>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<html>
<head>
<spring:url value="/resources/css/style.css" var="css" />
<spring:url value="/resources/js/main.js" var="js" />
<link rel='stylesheet' type='text/css' href="${css}">
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="${js}"></script>
<title>Title</title>
</head>
<body>
<h1>Title</h1>
<div id="tabs">
<ul>
<li><a href='#current-projects'>Current Projects</a></li>
<li><a href='#our-vision'>Our Vision</a></li>
<li><a href='#description'>About Us</a></li>
</ul>
<div id='current-projects' class='skill-block'>
<h2>Current Projects</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Broadway</li>
<li>MOVE</li>
</ul>
</p>
</div>
<div id='our-vision' class='skill-block'>
<h2>Our Vision</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Password Validator</li>
<li>Whale Talk</li>
</ul>
</p>
</div>
<div id='description' class='skill-block'>
<h2>About Us</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Coming soon...</li>
</ul>
</p>
</div>
</div>
</body>
</html>
这是我的 main.js(请注意,所有其他 jQuery 功能都有效,只是 tabs() 有错误):
(function() {
$(document).ready(function() {
$('#tabs').tabs();
$('.projects').hide();
$('.projects-button').on('click', function(){
var button = $(this);
button.next().slideToggle(400);
button.toggleClass('active');
button.text(button.hasClass('active') ? 'Hide' : 'Show');
})
});
})();
我也试过下载 jQuery 文件在本地加载它,但出现同样的错误。
.tabs()
是一个 jquery ui 函数 .. 你需要包含 jquery ui .. 所以在 include [=23 行之后=] 插入这一行
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
(function() {
$(document).ready(function() {
$('#tabs').tabs();
$('.projects').hide();
$('.projects-button').on('click', function(){
var button = $(this);
button.next().slideToggle(400);
button.toggleClass('active');
button.text(button.hasClass('active') ? 'Hide' : 'Show');
})
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<h1>Title</h1>
<div id="tabs">
<ul>
<li><a href='#current-projects'>Current Projects</a></li>
<li><a href='#our-vision'>Our Vision</a></li>
<li><a href='#description'>About Us</a></li>
</ul>
<div id='current-projects' class='skill-block'>
<h2>Current Projects</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Broadway</li>
<li>MOVE</li>
</ul>
</p>
</div>
<div id='our-vision' class='skill-block'>
<h2>Our Vision</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Password Validator</li>
<li>Whale Talk</li>
</ul>
</p>
</div>
<div id='description' class='skill-block'>
<h2>About Us</h2>
<p class='description'>
<div class='projects-button'>Show</div>
<ul class='projects'>
<li>Coming soon...</li>
</ul>
</p>
</div>
</div>