Switch css class dynamically on HREF click

Question

My task is to click an HREF list item, make it bold and make the others normal. Todo this I need to execute a simple class switch. I current get no errors at inspect, it just does nothing. Do server tags (asp:hyperlink which equates to a href) make a difference? Here's my code...

<%@ 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>

Your CSS classes are not the same. In the ASP code you have your class name as being `selected_Turn` but in your jQuery you are selecting an element with the class of `selTurn`. — Sumner Evans, Dec 03 '13 at 21:56

score 2 · Answer 1 · answered Dec 03 '13 at 21:56

2

You should try jquery addClass() toggleClass() and removeClass() methods instead of dealing with attributes. I believe toggleClass() will do what you want.

answered Dec 03 '13 at 21:56

Henry O

550
1
5
8

totymedli · Accepted Answer · 2013-12-03T22:03:14.863

1

All of your anchors have the selected_Turn class. Just add a click handler to them, that will remove the selected_Turn_on from the others and add it to the clicked. The last added class will override the default selected_Turn class's font-weight property.

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

edited Dec 03 '13 at 22:03

answered Dec 03 '13 at 21:57

totymedli

29,531
22
131
165

ok, this works BUT just for a split second until the page loads again. On another topic, how do I persist this class through the page load? – foxtrotZulu Dec 03 '13 at 23:23
1

JavaScript is client side. If you want to save these settings you have to store it somewhere. For example in a [cookie](http://stackoverflow.com/questions/1458724/), or [local storage](http://stackoverflow.com/questions/2010892/). Then read the value and make the changes according to that. – totymedli Dec 04 '13 at 17:25

score 0 · Answer 3 · answered Dec 03 '13 at 21:57

It looks like you first remove all the class attributes: jQuery('.selTurn a').removeAttr('class'); // remove all classes

then you attempt to append to those class attributes: jQuery(this).attr('class', this.className + "_on");

My guess would be somewhere to do with what is happening to this in your click function...

Switch css class dynamically on HREF click

3 Answers3