我正在做一个示例应用程序。在我的应用程序中，我试图将 javascript 插入到 html 中。但我没有得到想要的结果。
我已经下载了一个标签表单，这个链接提供了一个演示它的实际样子
我的jsp文件
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://www.springframework.org/tags/form"
prefix="form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style>
form
{
width: 400px;
}
label
{
float: left;
width: 150px;
}
input[type=text]
{
float: left;
width: 250px;
}
.clear
{
clear: both;
height: 0;
line-height: 0;
}
.floatright
{
float: right;
}
</style>
<style type="text/css">
<%@include file="tab/demo.css" %>
</style>
<script type="text/javascript" src="tab/jquery-2.0.3.js" ></script>
<script type="text/javascript" src="tab/script.js" ></script>
<script src="http://code.jquery.com/jquery-2.0.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$("#tabs").tabs();
});
</script>
</head>
<body>
<p>
Home</p>
<div id="tabs">
<ul id="navigationMenu">
<li> <a href ="#tab-1" class="selectedMenu">Home</a></li>
<li> <a href="#tab-2 " class="normalMenu">Teams</a></li>
<li> <a href="#tab-3 " class="normalMenu">Events</a></li>
<li><a href="#tab-4" class="normalMenu">The team</a></li>
<li><a href="#tab-5" class="normalMenu">About us</a></li>
<li><a href="#tab-6" class="normalMenu">Contact us</a></li>
</ul>
<div id="tab-1">
<h1>
new entry1</h1>
</div>
<div id="tab-2">
<h1>
new entry2</h1>
</div>
<div id="tab-3">
<h1>
new entry3</h1>
</div>
</div>
</body>
</html>
我已经把文件放在里面web-inf/views/tab/了
标签
文件夹包含
demo.css、script.js、jquery-2.0.3.js。
ing 文件包含在
意见/形象
script.js文件_
$(document).ready(function(){
$('#navigationMenu li .normalMenu').each(function(){
$(this).before($(this).clone().removeClass().addClass('hoverMenu'));
});
$('#navigationMenu li').hover(function(){
$(this).find('.hoverMenu').stop().animate({marginTop:'0px'},200);
},
function(){
$(this).find('.hoverMenu').stop().animate({marginTop:'-25px'},200);
});
});
和demo.css
/* Page styles */
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
margin:0px;
padding:0px;
}
body{
margin-top:20px;
font-family:Arial, Helvetica, sans-serif;
color:#51555C;
height:100%;
font-size:12px;
}
/* Navigation menu styles */
ul{
height:25px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
ul li{
border:1px solid #444444;
display:inline-block;
float:left;
height:25px;
list-style-type:none;
overflow:hidden;
}
ul li a, ul li a:hover,
ul li a:visited{
text-decoration:none;
}
.normalMenu, .normalMenu:visited,
.hoverMenu, .hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
outline:none;
padding:5px 10px;
display:block;
}
.hoverMenu,.hoverMenu:visited,
.selectedMenu,.selectedMenu:visited {
margin-top:-25px;
background:url(img/grey_bg.gif) repeat-x #eeeeee;
color:#444444;
}
.selectedMenu,.selectedMenu:visited {
margin:0;
}
.normalMenu, .normalMenu:visited{
color:white;
background:url(img/dark_bg.gif) repeat-x #444444;
}
我想得到这样的输出http://demo.tutorialzine.com/2009/09/stylish-navigation-menu-jquery/#。我得到的与上面的选项卡相同，但是当我选择第二个选项卡时，动画不起作用并且第一个选项卡仍然显示为高亮显示。在检查时我发现
脚本.js
文件未读取。即使我们删除
脚本.js
文件的结果是相同的，选项卡将显示，但没有动画，第一个选项卡总是突出显示。
提前致谢