2017-06-22 11 views
0

我有一個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> 

我要承擔格式做任何按下按鈕等刷新有些可以..但我不是專家的幫助將是驚人的:)

回答

0

你的按鈕被放置在一個窗體中,它沒有定義任何類型屬性。 在這種情況下,它被認爲是type =「submit」,所以每次點擊時只需提交表單,而Flip()函數不能顯示任何視覺變化。

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

應該現在的工作:

這種方式更改按鈕。

+0

這工作得很好,謝謝:) – Jousa11