ASP.NET Изменение цвета кнопки ссылки при щелчке без панели обратной передачи или обновления - PullRequest
Новая
       9

ASP.NET Изменение цвета кнопки ссылки при щелчке без панели обратной передачи или обновления

1 голос
/ 25 ноября 2011

на странице 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>

Я использую их в качестве триггеров для панели обновления на сайте.Когда пользователь нажимает на ссылку, на страницу загружается элемент управления.

Я хочу вот что:

Когда пользователь нажимает на ссылку, цвет этой ссылки изменяется, чтобы мы могли знать,какая ссылка была нажата последней.

Я хотел бы сделать это без панелей постбэк или обновления.Так есть ли способ сделать это через JavaScript?или другие решения?

Спасибо за любую помощь

Ответы [ 2 ]

4 голосов
/ 25 ноября 2011

JAVASCRIPT: 

<script>
    function changeColor(e) {
        e.style.color = "red";
        return false;
    }
</script>

HTML: 

<asp:LinkButton ID="LinkButton1" OnClientClick="return changeColor(this);" runat="server">LinkButton</asp:LinkButton>

Удачи!

1 голос
/ 25 ноября 2011

Конечно, есть способ с JavaScript.Вы можете подключить событие к атрибуту OnClientClick ваших LinkButton s и запустить некоторый код на стороне клиента.

Возможно, вы захотите создать CSS для двух состояний этой кнопки.Было бы проще назначить новым классам кнопки, чем изменять все их стили с помощью JavaScript.

Если бы вы хотели использовать библиотеку, такую ​​как jQuery , это было бы действительно просто:

  1. Назначьте соответствующий класс CSS «A» для каждой кнопки. 

    <asp:LinkButton ID="Button1" CssClass="button button-off" runat="server" />
<asp:LinkButton ID="Button2" CssClass="button button-off" runat="server" />

  2. Создайте класс «B» CSS, который является «выключен "состояние" и класс "C", который является состоянием "Вкл".

  3. Назначьте обработчик щелчка для каждой кнопки, имеющей класс «A».Примерно так (не проверено): 

    $('.button').click(function() {
    $('.button').removeClass('button-on');
    $(this).addClass('button-on');
});

Приведенный выше обработчик кликов должен вести себя так, чтобы он очищал класс «B» от всех кнопок с классом «A» и назначалКласс «C» для кнопки, которая была нажата.

...