CSS call from code behind not working

Question

I have the following entries in the css file.

a.intervalLinks { font-size:11px; font-weight:normal; color:#003399; text-decoration:underline; margin:0px 16px  0px  0px; }  
a.intervalLinks:link { text-decoration:underline; }  
a.intervalLinks:hover { text-decoration:none; }  
a.intervalLinks:visited { text-decoration:underline; }  
a.selectedIntervalLink { font-size:12px; font-weight:bold; color:#003399; text-decoration:none; margin:0px 16px 0px 0px; }  
a.intervalLinks:active { text-decoration:underline; font-size:large ;  }

Edited for trial:

a.big-link:link{}
a.big-link:visited {}
a.big-link:hover{}
a.big-link:active{font-size:1em;}

Whenever i take the click on some links (not shown) which is embedded in the webpage ..i can see the change in the link

a.intervalLinks:active { text-decoration:underline; font-size:large ;

(the font of the link will become large)

but after clicking the page refreshes ..the changes will go away

i want to keep the change for ever in that link ...even there is a page refresh

i understood that ..this can achieved only throughg the code behind of asp.net

Following code should work:but unfortunately its not ..could anyone help?

protected override void OnInit(EventArgs e)
        {
            rptDeptList.ItemDataBound += new RepeaterItemEventHandler(rptDeptList_ItemDataBound);

        }

        void rptDeptList_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
            if (e.Item.DataItem == null)
                return;
            LinkButton btn = (LinkButton)e.Item.FindControl("LinkButton1");
            btn.Attributes.Add("class", "intervalLinks");  


        }

Edited for trial:

   void rptDeptList_ItemDataBound(object sender, RepeaterItemEventArgs e)
            {
                if (e.Item.DataItem == null)
                    return;
                LinkButton btn = (LinkButton)e.Item.FindControl("LinkButton1");
                btn.Attributes.Add("class", "intervalLinks");  
                MyLinkButton.CssClass +=" big-link";

            }

Current html code for links has been shown below :

<ItemTemplate>
<div class='dtilsDropListTxt'><div class='rightArrow' ></div>
<asp:LinkButton ID="LinkButton1" runat="server" Text=<%#DataBinder.Eval(Container.DataItem, "WORK_AREA")%>  
CssClass="intervalLinks" OnClick="LinkButton1_Click" ></asp:LinkButton>
</div>
</ItemTemplate>

Could anyone help?

Answer 1

In your visited pseudo-selector of the link, type the changes you want to see, like

mylink:visited{text-decoration: line-through;}

Answer 2

You have a couple of mistakes in your code behind. First of all, MyLinkButton.CssClass += " big-link" was an example. In your code, you do not have a button called MyLinkButton. Instead, you should be using btn.CssClass += " big-link", as btn is the button you are dealing with.

Secondly, your code will attach the big-link class to all of the link buttons, since you do not have a conditional that checks to see which button actually needs the new class. When the link button is pressed, you'll need to store an Enum or something similar in the ViewState, so that in the DataBound event of the repeater, you can determine which link button should have the big-link class attached to it.

Answer 3

The easiest way to do this is to create an entirely new css class. When the item is clicked, remove the current class and add the new one. You can accomplish this client side using javascript or jquery quite simply, or codebehind. The former will save you a roundtrip.