ASP.Net DIV FLIP表单不起作用。

问题描述:

我有一个CSS翻页,在点击按钮时激活。问题是,当我把它放在asp.net中翻转不起作用。我不知道如果asp.net表单自动刷新任何帮助将appriciated。ASP.Net DIV FLIP表单不起作用。

*/The Css /* 

    .flip-container { 
    perspective: 1000px; 
} 
    .flip-container.hover .flipper, .flip-container.hover .flipper { 
     transform: rotateY(180deg); 
    } 

.flip-container, .front, .back { 
    width: 320px; 
    height: 480px; 
} 
.flipper { 
    transition: 0.6s; 
    transform-style: preserve-3d; 
    position: relative; 
} 
.front, .back { 
    backface-visibility: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
.front { 
    z-index: 2; 
    /* for firefox 31 */ 
    transform: rotateY(0deg); 
} 

.back { 
    transform: rotateY(180deg); 
} 

而且它在下面的格式

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %> 
<link rel="stylesheet" href="\_Layout\_Flip.css"> 
<link rel="stylesheet" href="\_Layout\_Layout.css"> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
</form> 
     <div class="flip-container" id="FLIPDIV"> 
      <div class="flipper"> 
       <div class="front"> 
        Front 
        <button onclick="Flip()">Flip Me!</button> 
       </div> 
       <div class="back"> 
        Back 
       </div> 
      </div> 
     </div> 

</body> 
</html> 
<script> 
    function Flip() { 
     var x = document.getElementById('FLIPDIV'); 
     x.classList.toggle('hover'); 
    } 
</script> 

当我尝试在一个ASP.NET窗体翻转不起作用的作品。我需要ASP的形式:文本框等。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="NewUser.test" %> 
<link rel="stylesheet" href="\_Layout\_Flip.css"> 
<link rel="stylesheet" href="\_Layout\_Layout.css"> 
<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
</head> 
<body> 
<form id="form1" runat="server"> 
     <div class="flip-container" id="FLIPDIV"> 
      <div class="flipper"> 
       <div class="front"> 
        Front 
        <button onclick="Flip()">Flip Me!</button> 
       </div> 
       <div class="back"> 
        Back 
       </div> 
      </div> 
     </div> 
</form> 
</body> 
</html> 
<script> 
    function Flip() { 
     var x = document.getElementById('FLIPDIV'); 
     x.classList.toggle('hover'); 
    } 
</script> 

我要承担格式做任何按下按钮等刷新有些可以..但我不是专家的帮助将是惊人的:)

你的按钮被放置在一个窗体中,它没有定义任何类型属性。 在这种情况下,它被认为是type =“submit”,所以每次点击时只需提交表单,而Flip()函数不能显示任何视觉变化。

<button type="button" onclick="Flip()">Flip Me!</button> 

应该现在的工作:

这种方式更改按钮。

+0

这工作得很好,谢谢:) – Jousa11