jQuery选项卡未呈现

时间:2015-09-23 09:12:35

标签: jquery

我有下面的JSP代码,需要显示jQuery Tab(即Login和Register选项卡),但是目前JSP没有显示选项卡(JSP屏幕的URL如下所示,因为我无法附加图片如下10个声望)。

我已按照以下项目结构将css和jQuery文件导入Eclipse webapp \ css和webapp \ _js文件夹,导入后webapp \ css \ jquery-ui.css脚本中存在大量错误。通过互联网了解css中的错误可以忽略,我的理解是否正确?如果是的话,想获得关于为什么Tab没有显示的建议?谢谢。

<!DOCTYPE html>
<html>
<head>
<title>Login and Registration Page</title>
<link rel="stylesheet" href="css/jquery-ui.css">
<link rel="stylesheet" href="css/style.css">

<script src="js/jquery-1.11.3.js"></script>
<script src="js/jquery-ui.js"></script>

<script>
$(function() {
  $( "#tabs" ).tabs();
});
</script>


</head>
<body>
    <div class="wrapper">
        <div class="container">
            <div id="tabs">
                <ul>
                    <li><a href="#login">Login</a></li>
                    <li><a href="#register">Register</a></li>
                </ul>
                <div id="login">
                    <% if((String)session.getAttribute("error") != null){ %>
                    <h4> Invalid Email or Password. Please try again.</h4>
                    <% } %>
                    <form method="post" action="LoginController">
                        <label for="email">Email:</label> 
                        <br /> <input type="text" name="email" id="email" /> 
                        <br /> <label for="password">Password:</label>
                        <br /> <input type="password" name="password" id="password" /> <br />
                        <br /> <input type="submit" value="Login">
                    </form>
                </div>
                <div id="register">
                    <% if((String)session.getAttribute("errorReg") != null){ %>
                    <h4><%=session.getAttribute("errorReg") %></h4>
                    <% } %>
                    <form method="post" action="RegistrationController">
                        <label for="name">Name:</label>
                          <br /> <input type="text" name="name" id="name" /> 
                          <br /> <label for="email">Email:</label>
                          <br /> <input type="text" name="email" id="email" /> 
                          <br /> <label for="password">Password:</label>
                          <br /> <input type="password" name="password" id="password" /> 
                          <br /> <label for="address">Address:</label>
                          <br /> <input type="text" name="address" id="address" /> 
                          <br /> 
                          <br /> <input type="submit" value="Register">
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

body {
    background-color: #e7e7e7;
    font-family: Helvetica;
    font-size: 14px;
    color: #666;
    margin: 0px;
    padding: 0px;
}
 
.wrapper {
    width: 900px;
    height: 500px;
    margin: 0 auto;
    background: white;
    margin: 0 auto;
}
 
.container {
    min-height: 400px;
    border-top: 1px solid gray;
    padding: 50px;
}

被修改

我使用Firefox查看页面源并发现当我点击页面源文件中的.js链接时出现以下资源未找到错误,似乎是jquery脚本的文件路径错误(而css链接)很好)。我已经参考了这个论坛中的其他主题,并验证了js文件路径和文件夹的正确指定如下。需要建议可能是什么原因?提前致谢

资源文件位置:

<mvc:resources mapping="/resources/**" location="/resources/" />

Eclipse项目中jQuery文件的文件结构:

- webapp / resources / css / jquery-ui.css(v1.11.4版)

- webapp / resources / css / style.css(代码如下所示)

- webapp / resources / js / jquery-1.11.3.js

- webapp / resources / js / jquery-ui.js(v1.11.4版)

<link rel="stylesheet" href="resources/css/jquery-ui.css">
<link rel="stylesheet" href="resources/css/style.css">
<script src="resources/js/jquery-1.11.3.js"></script>
<script src="resources/js/jquery-ui.js"></script>

最终解决方案

1)已解决“找不到HTTP请求的映射, /resources/js/jquery-1.11.3.js“错误,将jquery文件放在resources文件夹而不是Eclipse webapps文件夹中(如上所示)。

2)解决了以下在浏览器中找不到的js文件,由于js文件夹错误地命名为“jss”,因此将其重命名为“js”。

单击Firefox视图页面源中的js链接时发现错误

  

Apache Tomcat / 6.0.37 - 错误   报告      

525D76;} - &GT;

HTTP状态404 -

类型状态      

报告

消息

描述   请求的资源不可用。

Apache Tomcat / 6.0.37

浏览器中JSP屏幕的URL

http://postimg.org/image/qi52vc89p/

1 个答案:

答案 0 :(得分:0)

我尝试运行你的代码,我能够看到标签只是在你的jquery-ui.css中,请用下面替换并尝试

var points = [[1,0],[1,-6],[-1,-6],[-1,0],[1,0] ];
var polygon = new ol.geom.Polygon([points]);
var rotateTransform = function (coords) {              
    var renderArray=[];
       for (var i = 0; i < coords.length; i++) {
            //rotation 45 degrees
            var rot  =  45 / 180 * Math.PI;
            renderArray[i]   = (coords[i][0] + 0.2 * Math.cos(rot));
            renderArray[i+1] = (coords[i][1]  + 0.2* Math.sin(rot));
        }
       return renderArray;
}; 
        polygon.applyTransform(rotateTransform(points));