Переключайте класс css динамически на HREF-клике

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

источник

2013-12-03 foxtrotZulu

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

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

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

источник

2013-12-03 21:57:21 totymedli

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

JavaScript - это клиентская сторона. Если вы хотите сохранить эти настройки, вы должны их где-то сохранить. Например, в [cookie] (http://stackoverflow.com/questions/1458724/) или [локальном хранилище] (http://stackoverflow.com/questions/2010892/). Затем прочитайте значение и внесите изменения в соответствии с этим. – totymedli

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

источник

2013-12-03 21:56:57

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

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

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

источник

2013-12-03 21:57:44

Переключайте класс css динамически на HREF-клике

ответ

Смежные вопросы