需要有關按鈕的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>