Question

这是我的jsp代码..我不知道我在这段代码中做错了什么但它根本不起作用.....不知道我哪里出错...可以帮我一个人请这个。

<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" href="css/feedback.css" type="text/css" media="all">
        <script>
            $("#myButton").click(function () {

    var effect = 'slide'; 
    var options = { direction: 'right' };
    var duration = 700;

    $('#myDiv').toggle(effect, options, duration);
});
        </script>
        <title>JSP Page</title>
    </head>
    <body>
        <div id="body">




    <p>
        <button id="myButton">Click Me!</button>
    </p>
    <div id="myDiv">       
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div>
</div>
    </body>
</html>

这是我的CSS

 body {
    font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
}

 #myButton {
    padding: .2em 1em;
    font-size: 1em;
}
#myDiv {
    color:Green;
    background-color:#eee;
    border:2px solid #333;
    display:none;
    text-align:justify;
}
#myDiv p {
    margin: 15px;
    font-size: 0.917em;
}

 #body {
    clear: both;
    margin: 0 auto;
    max-width: 534px;
}
html, body {
    background-color:White;
}

我认为我已经把所有事情都给了正确的但仍然没有任何帮助......

Answer 1

您需要像这样添加jquery库

 <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

或下载并像这样添加

 <script src="js/jquery-1.10.1.min.js"></script>

Answer 2

您必须将jquery-ui脚本文件包含在您的代码中

只需用文档ready

包裹按钮点击代码即可

<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

//This is added for the toogle method

  <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
    <style type="text/css">
        body {
            font: 12px Tahoma, Arial, Helvetica, Sans-Serif;
        }

        #myButton {
            padding: .2em 1em;
            font-size: 1em;
        }

        #myDiv {
            color: Green;
            background-color: #eee;
            border: 2px solid #333;
            display: none;
            text-align: justify;
        }

            #myDiv p {
                margin: 15px;
                font-size: 0.917em;
            }

        #body {
            clear: both;
            margin: 0 auto;
            max-width: 534px;
        }

        html, body {
            background-color: White;
        }
    </style>
    <script type="text/javascript">



        $(document).ready(function () {
          // here i put the button click inside the document ready function

            $("#myButton").click(function () {

                var effect = 'slide';
                var options = { direction: 'right' };
                var duration = 700;

                $('#myDiv').toggle(effect, options, duration);
            });
        });
    </script>
    <title>JSP Page</title>
</head>
<body>
 <div id="body">
    <p>
        <button id="myButton">Click Me!</button>
    </p>
    <div id="myDiv">
        <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
    </div>
  </div>
</body>
</html>

我用chrome测试了这段代码，它正在为我工作

Answer 3

你在网页中加入了“jquery.js”吗？在“script”标签

之前将其添加到您的头部

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

按钮Onclick从右到左悬停div不适用于我的JSP页面。

3 个答案: