Question

我有一个包含母版页和一个网页表单的项目。我在左侧和中心创建菜单我创建按钮和搜索栏..目前我只完成了html和css ..没有编码开始

当我打开页面然后当我点击按钮然后整个页面刷新并且当页面刷新时，菜单也刷新并且看起来很奇怪..如何停止整个页面刷新？

html和css

    body 
{
     font-family:Calibri;

}
.lefttabs    {
    background-color:#1E1E1E;
    color:White;
    font-family:Calibri;
    font-weight:bold;
    font-size:medium;

    width: 300px; 
    height: 850px;
    z-index:1;/* Stay on top */
    padding-top: 60px; 
    /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.lefttabs a {


    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
    font-size:medium;
    color:White;
    width: 133px;
    margin-left: 0px;


  padding: 8px;
  text-decoration: none;

  line-height: 24px;  


}
.lefttabs ul
{
    list-style:none;
    margin:0;

    padding: 0;




 }
.lefttabs li
{
    list-style:none;



 }
 .lefttabs li  a 
{
    list-style:none;
    display:block;
   padding: 10px 0px 30px 10px;
  /*padding-left: 10px;*/
  /*padding-top: 10px;*/
  width: 96%;
  /*add this*/


 } 
.lefttabs a:hover
{

 background-color:White;
color:Black;
 }
 .imga
{
   display: inline-block;
    vertical-align: top;
    width: 40px;
    height: 30px;

    margin-right: 20px;

}
.lefttabs a imga{
  margin:0 8px 0 0;
  vertical-align: middle;  /* needed */
}

 @media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}
.rightdiv
{
    width: 900px;

    background-color:White;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;

    margin-top: 40px;
    margin-left: 320px;
    }


.BTN
{
    color:White;
    padding: 10px 20px 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    font-family:Calibri;
    font-weight:bold;
    margin: 10px 20px 0px 20px;
    border-radius:2px;
    background-color: #008CBA;
    border:none;

    }

.search 
{
    margin: 10px 10px 0px 10px;
    padding:8px 15px;
    background:rgba(50, 50, 50, 0.2);

    border:0px solid #dbdbdb;
    margin: 10px 10px 0px 10px;
    width: 50%;

}  

.button {
                position:relative;
                padding:6px 15px;
                left:-8px;
                border:2px solid #207cca;
                background-color:#207cca;
                color:#fafafa;
}
.button:hover  {
                background-color:#fafafa;
                color:#207cca;
}

    <body background="images/bggcol.jpg">
    <form id="form1" runat="server">


    <div class="lefttabs">
    <ul >
    <li>
    <a href=""><img class="imga" alt="a1" src="images/eve.bmp" border="0" />a1</a>

    </li>
    <li>
    <a href=""> <img class="imga" alt="a2" src="images/eve.bmp" border="0" />a2</a>
    </li>
    <li> 
    <a href=""> <img class="imga" alt="a3" src="images/ve.bmp" border="0" />a3</a>
    </li>
   <li> 
    <a href=""><img class="imga" alt="a4" src="images/nfc.bmp" border="0" />a4</a>
    </li>
    <li> 
    <a href=""><img class="imga" alt="a5" src="images/user.bmp"  border="0" />a5</a>
    </li>
    <li> 
    <a href=""><img class="imga" alt="a6" src="images/rol.bmp" border="0" />a6</a>
    </li>
    <li> 
    <a href=""><img class="imga" alt="a7" src="images/rep.bmp" border="0" />a7</a>
    </li>
     <li> 
     <a href=""><img class="imga" alt="a8" src="images/lo.bmp" border="0" />a8</a>
    </li>
    </ul>
    </div>
    <div>

        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

        </asp:ContentPlaceHolder>
    </div>



    </form>
</body>

网络表单

    <div class="rightdiv">

<input type="text"  class="search"  placeholder="Search..." />
 <input type="button" class="button"  value="Search"/>

<hr />


    <asp:Button  CssClass="BTN" ID="Button1" runat="server" Text="OVERVIEW" />

    <asp:Button   CssClass="BTN" ID="Button2" runat="server" Text="ADD DRIVER" />
    <asp:Button  CssClass="BTN" ID="Button3" runat="server" Text="ADD DEVICE" />
    <asp:Button  CssClass="BTN" ID="Button4" runat="server" Text="ADD TAG" />
    </div>

Answer 1

HTML中的按钮默认为表单提交按钮。如果你在按钮的onclick事件中添加一些javascript：onclick =“javascript：return false;”它不会发送表格。

如果要按照我期望的搜索栏提交，它会刷新，因为您正在向服务器发送消息，并且回复会触发页面刷新以显示结果。

按钮单击页面刷新

1 个答案: