需要CSS按钮的建议

Question

我有一个asp.net页面。侧边栏中有几个按钮。还有另一个按钮“编辑”。 请看我的形象：

我的问题：除非单击侧边栏中的按钮，否则我不希望显示“编辑”按钮。 是的，默认显示出来。我的目标是“编辑”没有显示没有说出点击“Problems1”然后“编辑”将显示在gridview下面。 我的代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="WebTest._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script  type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="wrap">
 <div id="sidebar">
        <asp:Button ID="p1" runat="server" Text="Problems1" CssClass="sidebar_buttons"
         OnClientClick="Edit_Click()" />
        <asp:Button ID="p2" runat="server" Text="Problems2" CssClass="sidebar_buttons"
             />
        <asp:Button ID="p3" runat="server" Text="Problem3" CssClass="sidebar_buttons" />
        <asp:Button ID="p4" runat="server" Text="Problem4" CssClass="sidebar_buttons" />
        <asp:Button ID="p5" runat="server" Text="Problem5" CssClass="sidebar_buttons" />
        <asp:Button ID="p6" runat="server" Text="Problem6" CssClass="sidebar_buttons" />
        <asp:Button ID="p7" runat="server" Text="Problem7" CssClass="sidebar_buttons" />
    </div>
    <div id="gridview">
        <asp:GridView ID="GridView1" runat="server">
        </asp:GridView>
    </div>
      <div id="btnEdit" >
        <asp:Button ID="Edit" runat="server"  Text="Edit" /></div>
</div>

和CSS：

#wrap
{
     width: 800px;
     background-color: #99c;
}
#sidebar
{
    float: left;
    width: 125px;
    padding-top:10px;
    background-color: #C0C0C0;
}
#gridview
{
    float: right;
    width: 675px;
}

.sidebar_buttons
{
    margin-top: 10px;
    margin-left: 2px;
    margin-bottom: 10px;
    width: 120px;
 }

#btnEdit
{
   float: inherit;
}

Answer 1

在aspx代码中，将编辑按钮设置为visible = false。进入其他按钮的属性，进入事件并双击“Click”事件并放置代码以使按钮可见:)

希望这有帮助

Answer 2

首先通过在

中插入此属性来隐藏您的编辑按钮

#btnEdit
{
   float: inherit;
   display:none; //hide your edit button
}

然后在点击时调用jQuery函数并显示编辑按钮，如

$("#button").click(function(){
     $("#btnEdit").show();
});

Answer 3

首先添加display：none;到btnEdit的css

#btnEdit
{
    display:none;
}

然后在单击“Problem1Button”时使用Jquery显示btnEdit（将其替换为按钮的ID）

<script>
$(document).ready(function () {
    $("#Problem1Button").click(function (event) {
    $("#btnEdit").show();            

    });
}
</script>