需要有关按钮 CSS 的建议答案

【问题标题】：Need advice for CSS for the button需要有关按钮 CSS 的建议
【发布时间】：2012-03-30 23:36:59
【问题描述】：

我有一个 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;
}

【问题讨论】：

我仍然没有看到问题。你试过什么？
我的问题：我不希望显示“编辑”按钮，除非单击侧边栏上的按钮。

标签： javascript asp.net css

【解决方案1】：

首先通过在您的

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

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

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

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

【讨论】：

代码有可能无法工作，因为在运行时 asp.net 可能会将按钮的名称更改为其他名称。使用 CssClass 属性或
您应该可以通过在按钮上将ClientIDMode 设置为Static 来解决此问题。

【解决方案2】：

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

希望对你有帮助

【讨论】：

这可行，但需要回发。我更喜欢 jassi9911 的解决方案。

【解决方案3】：

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

#btnEdit
{
    display:none;
}

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

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

    });
}
</script>

【讨论】：