javascript ASP.NET 在没有回发或更新面板的情况下单击时更改链接按钮颜色
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/8272729/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ASP.NET Change link button color when clicked without post-back or update panel
提问by Youssef
in an asp.net page I have a list of Link buttons:
在 asp.net 页面中,我有一个链接按钮列表:
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="Link_Click">Link 1</asp:LinkButton>
<asp:LinkButton ID="LinkButton3" runat="server" OnClick="Link_Click">Link 2</asp:LinkButton>
<asp:LinkButton ID="LinkButton5" runat="server" OnClick="Link_Click">Link 3</asp:LinkButton>
I am using them as triggers for an update panel on the site. When a user clicks on a link a control gets loaded on the page.
我将它们用作网站上更新面板的触发器。当用户单击链接时,页面上会加载一个控件。
What I want is this:
我想要的是这个:
Whne the user clicks on a link the color of that link change so we can know which link was pressed last.
当用户单击链接时,该链接的颜色会发生变化,因此我们可以知道最后按下的是哪个链接。
I would like to do this without post-back or update panels. So is there a way to do this via javascript? or other solutions?
我想在没有回传或更新面板的情况下执行此操作。那么有没有办法通过javascript来做到这一点?或其他解决方案?
Thank you for any help
感谢您的任何帮助
回答by Hanlet Esca?o
JAVASCRIPT:
爪哇脚本:
<script>
function changeColor(e) {
e.style.color = "red";
return false;
}
</script>
HTML:
HTML:
<asp:LinkButton ID="LinkButton1" OnClientClick="return changeColor(this);" runat="server">LinkButton</asp:LinkButton>
Good luck!
祝你好运!
回答by C???
Sure, there's a way with JavaScript. You could hook up an event to the OnClientClick
attribute of your LinkButton
s and run some client-side code.
当然,JavaScript 有办法。您可以将事件连接到s的OnClientClick
属性LinkButton
并运行一些客户端代码。
You might want to create some CSS for the two states of that button. It would be easier to assign new classes to the buttons than to change all of their styling with JavaScript.
您可能想要为该按钮的两种状态创建一些 CSS。为按钮分配新类比使用 JavaScript 更改它们的所有样式更容易。
If you were willing to use a library like jQuery, it would be really easy:
如果您愿意使用像jQuery这样的库,那将非常简单:
Assign a matching CSS class "A" to each button.
<asp:LinkButton ID="Button1" CssClass="button button-off" runat="server" /> <asp:LinkButton ID="Button2" CssClass="button button-off" runat="server" />
Create a "B" CSS class that is the "off" state and "C" class that is the "On" state.
Assign a click handler to each button that has the "A" class. Something like this (untested):
$('.button').click(function() { $('.button').removeClass('button-on'); $(this).addClass('button-on'); });
为每个按钮分配一个匹配的 CSS 类“A”。
<asp:LinkButton ID="Button1" CssClass="button button-off" runat="server" /> <asp:LinkButton ID="Button2" CssClass="button button-off" runat="server" />
创建一个处于“关闭”状态的“B”CSS 类和处于“开启”状态的“C”类。
为每个具有“A”类的按钮分配一个点击处理程序。像这样的东西(未经测试):
$('.button').click(function() { $('.button').removeClass('button-on'); $(this).addClass('button-on'); });
The click handler above should behave so that it clears the "B" class from all of the buttons with class "A" and assigns the "C" class to the button that was clicked.
上面的点击处理程序的行为应该是从所有具有“A”类的按钮中清除“B”类,并将“C”类分配给被点击的按钮。