CODEWITHSUNDEEP
c#asp.nethtmlcss
Harry
Harry

Reputation: 17

HTMLControl Style.Add

I have a web site created using C# and Visual Studio.

I have the following menu in my Site.master:

<div class="menu">
  <ul>
    <li runat="server" id="liHome">   <a href="Default.aspx">Home</a></li>
    <li runat="server" id="liAbout">  <a href="About.aspx">About</a></li>
    <li runat="server" id="liContact"><a href="ContactUs.aspx">Contact</a></li>
  </ul>
</div>

And I have the following css:

.menu ul {}
.menu ul li a{padding:9px 10px; display:block; color:#fff; font-size:16px; font-weight:bold;}
.menu ul li a:hover{color:#00ff00; text-decoration:none; }

What I want to do is when the menu is clicked, I want the text of the selected menu item to change and stay a different colour. In my Site.master.cs I am doing the following for the 'About' menu item for example:

    if (Request.Url.ToString().Contains("About") == true)
    {   
        liContact.Style.Add("color", "#00ff00");
    }

But the colour does not stay green. Can anyoe help me as to what I'm doing wrong? Thanks

Upvotes: 1

Views: 7827

Answers (2)

शेखर
शेखर

Reputation: 17614

You can use as follows

  if (Request.Url.ToString().Contains("About") == true)
  {    
      liContact.Style.Add("color", "#00ff00!important");
  }

You need to add !important in your css only then it will work.
Otherwise it will override by the class.

Edit 1

Other wise make a different class

.menu ul {}
.menu ul li a{padding:9px 10px; display:block; color:#fff; font-size:16px; font-weight:bold;}
.menu ul li a:hover{color:#00ff00; text-decoration:none; }

.menu ul li.selected a{padding:9px 10px; display:block; color:#00ff00; font-size:16px; 
       font-weight:bold;}

And rather then setting color replace the class.

liContact.Attributes.Remove("class");   
liContact.Attributes.Add("class", "selected");

Edit 2

 .menu ul li.selected a:hover{padding:9px 10px; display:block; color:#00ff00; font-size:16px; 
       font-weight:bold;}

Upvotes: 1

MageDev
MageDev

Reputation: 239

Active Html Link tutorial

this tutorial help you to solve your probloem.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue A visited link is underlined and purple An active link is underlined and red

Upvotes: 1

Related Questions