サンプルアプリをやっています。私のアプリケーションでは、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/# . 私が得ているものは上記のタブと同じですが、アニメーションが機能せず、2番目のタブを最初に選択してもハイライト表示されます。チェックしたところ、
script.js
ファイルが読み取られていません。削除しても
script.js
ファイルの結果は同じで、タブは表示されますが、アニメーションは表示されず、最初のタブは常に強調表示されます。
前もって感謝します