CODEWITHSUNDEEP
jquerycsshover
user207888
user207888

Reputation: 397

not able to change color of link on click

I have menu in right side of page , all the links in menu is orange color. When I hover any of the link it goes to black. But what I want is until I click on any other link it should remain active in black color so that everyone knows the page which is opened belongs to that link. It might be a silly question but I am not able to do it. Thanks in advance.

Here is the code :

JavaScript function :

@section JavaScript{
<script type="text/javascript">
    $('#allapps a').click(function () {
        $('#allapps a').removeClass('selected'); // remove selected from any other item first
        (this).addClass('selected'); //add selected to the one just clicked.
    });
 </script>
}

link :

<a id="allapps" class="allapps" href="@Url.Action("CategoryType", "Marketplace", new { @id = 1 })"><h3 class="allapps grid_2 alpha">Legal </h3><p class="grid_1 omega calculate" > @ViewBag.legal</p><br /><br /></a>

css:

.allapps
{
font-family: Arial;
font-size: 12px;
color:#C55000;
padding-left:20px;
font-weight:bold;
}

a.allapps :link {
   color: Black;
}

a.allapps :visited {
 color:Black;}

a.allapps :hover {
 color:Black;}

a.allapps :active {
  color:Black; }

Upvotes: 0

Views: 104

Answers (3)

Jai
Jai

Reputation: 74738

Try this:

  $(function(){
     var url = window.location.href;
     var page = url.substr(url.lastIndexOf('/')+1);
     $('a[href$="'+page+'"]').addClass('selected');

     $('#allapps a').click(function () {
        $('#allapps a').removeClass('selected');
        $(this).addClass('selected');
     });
  });

What seems that you want to highlight the link but when clicked on it page get refreshed and applied class gets removed.

Upvotes: 0

Pandian
Pandian

Reputation: 9126

In your JQuery Why you use both the ID name and Tag Name....?

$('#allapps a').click(function () {

Can you try like below... may be it will help you..

$('#allapps').click(function () {
        $('#allapps').removeClass('selected'); // remove selected from any other item first
        $(this).addClass('selected'); //add selected to the one just clicked.
    });

Also i didn't find .selected Class in your CSS...

Try to add it

.selected{
 color:Black;}

Upvotes: 0

Adil
Adil

Reputation: 148130

You missed the $ or jQuery

Change

(this).addClass('selected');

To

$(this).addClass('selected');

Upvotes: 1

Related Questions