显示内容的问题

时间:2013-12-15 20:26:06

标签: javascript jquery html css

在私人消息系统中单击响应回到其他用户,将出现一个框,

当我点击它时它不会是

HTML

<form action="#" method="post">
<input type="submit" name="svar" value="Svar" id="indholdcklik" class="click svarpm">
</form>

要在页面上显示的内容

<div id="indholdbeksed">
hey
</div>

CSS

#indholdbeksed {
    display: none;
    margin: 10px 0px;
}
.click {
    font-weight: bold;
    color: #ffffff;
    background: #79bbff;
    background: -moz-linear-gradient(top, #79bbff 0%, #4197ee 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#79bbff), color-stop(100%,#4197ee));
    background: -webkit-linear-gradient(top, #79bbff 0%,#4197ee 100%);
    background: -o-linear-gradient(top, #79bbff 0%,#4197ee 100%);
    background: -ms-linear-gradient(top, #79bbff 0%,#4197ee 100%);
    background: linear-gradient(to bottom, #79bbff 0%,#4197ee 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#79bbff', endColorstr='#4197ee',GradientType=0 );
}
.click:hover {
    background: #4197ee;
    background: -moz-linear-gradient(top,  #4197ee 0%, #79bbff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4197ee), color-stop(100%,#79bbff));
    background: -webkit-linear-gradient(top,  #4197ee 0%,#79bbff 100%);
    background: -o-linear-gradient(top,  #4197ee 0%,#79bbff 100%);
    background: -ms-linear-gradient(top,  #4197ee 0%,#79bbff 100%);
    background: linear-gradient(to bottom,  #4197ee 0%,#79bbff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4197ee', endColorstr='#79bbff',GradientType=0 );
}

并在页面顶部显示:

的jQuery

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

$("#indholdcklik").click(function() {
  $("#indholdbeksed").slideDown("slow",function() {
    // Animation complete.
  });
});

2 个答案:

答案 0 :(得分:0)

我创建了jsfiddle并添加document.ready以启动您的JavaScript,然后文档已准备好并添加return false以阻止表单提交。 现在一切正常。

答案 1 :(得分:0)

确保您的javascript代码位于<script>代码之间和

之内
$(document).ready(function() {
    // your code here
});

您应该阻止表单提交。将事件传递给回调函数并停止提交。

$("#indholdcklik").click(function(ev) { 
    ev.preventDefault();
    // everything else..