需要有关按钮的CSS的建议

Question

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

我的问题：我不希望显示“编辑”按钮，除非单击侧边栏中的按钮。 现在，它是默认显示。 我的目标是不显示“编辑”，除非单击“问题1”，然后在网格视图下方将显示“编辑”。 我的代码：

<%@ 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>