Динамическое переключение класса CSS по нажатию кнопки HREF

Question

Динамическое переключение класса CSS по нажатию кнопки HREF

0

Моя задача - щелкнуть элемент списка HREF, сделать его жирным и сделать остальные нормальными. Тодо, мне нужно выполнить простой переключатель класса. Я не получаю ошибок при проверке, это просто ничего не делает. Имеют ли теги сервера (asp: гиперссылка, которая приравнивается к href)? Вот мой код...

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SmuSideNavigationSublayout.ascx.cs" Inherits="SmuSideNavigation.layouts.ProjectX.sublayouts.SmuSideNavigationSublayout" %>

<style type="text/css">

    .selected_Turn {
        font-weight: normal;
    }

    .selected_Turn_on {
        font-weight: bold;
    }
</style>


<div id="smuSideNav" class="selTurn">
    <ul class="nav nav-list">
        <li class="nav-header home"><asp:HyperLink runat="server" ID="hypParent" CssClass="selected_Turn"/></li>
        <asp:Repeater ID="Repeater1" runat="server">
            <ItemTemplate>
                <li><asp:HyperLink runat="server" ID="hypChild" CssClass="selected_Turn"/></li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div> 


<script type="text/javascript">
    jQuery('.selTurn a').click(function () {
        jQuery('.selTurn a').removeAttr('class'); // remove all classes
        jQuery(this).attr('class', this.className + "_on");
    });
</script>

foxtrotZulu 03 дек. 2013, в 23:08

Источник

0

Ваши классы CSS не совпадают. В коде ASP у вас есть имя класса selected_Turn но в вашем jQuery вы выбираете элемент с классом selTurn .
Sumner Evans 03 дек. 2013, в 21:56

Теги:

jquery

css

c#-4.0

3 ответа

2

Вы должны попробовать jQuery addClass() toggleClass() и removeClass() вместо использования атрибутов. Я считаю, что toggleClass() будет делать то, что вы хотите.

Henry O 03 дек. 2013, в 19:57

0

Похоже, вы сначала удалите все атрибуты класса: jQuery('.selTurn a').removeAttr('class');//remove all classes jQuery('.selTurn a').removeAttr('class');//remove all classes

то вы jQuery(this).attr('class', this.className + "_on"); добавить к этим атрибутам класса: jQuery(this).attr('class', this.className + "_on");

Мое предположение было бы где-то связано с тем, что происходит с this в вашей функции щелчка...

Ben Schmidt 03 дек. 2013, в 18:57

Ещё вопросы

Ваши классы CSS не совпадают. В коде ASP у вас есть имя класса selected_Turn но в вашем jQuery вы выбираете элемент с классом selTurn .

totymedli · Accepted Answer · 2013-12-03T20-16-00.000Z

Все ваши якоря имеют класс selected_Turn. Просто добавьте к ним обработчик кликов, который удалит selected_Turn_on из других и добавит его к клику. Последний добавленный класс переопределит свойство font-weight selected_Turn по умолчанию.

$('.selected_Turn').click(function () {
    $('.selected_Turn').removeClass('selected_Turn_on');
    $(this).addClass('selected_Turn_on');
});

хорошо, это работает НО только на долю секунды, пока страница не загрузится снова. По другой теме, как мне сохранить этот класс при загрузке страницы?
JavaScript на стороне клиента. Если вы хотите сохранить эти настройки, вы должны где-то их сохранить. Например, в куки или локальном хранилище . Затем прочитайте значение и внесите соответствующие изменения.