CODEWITHSUNDEEP
javascriptcssfunctiononclicktextcolor
mALEFACTOr
mALEFACTOr

Reputation: 123

Changing text (link) color onclick with javascript

I can not change the color of the text with js. Showing and Hiding div tags are working great but color can't be changed. btw, in my css file there are no styles for those links.

HTML:

    <ul>
    <li id="web_link"><a href="#">WEB</a></li>
    <li id="design_link"><a href="#">DESIGN</a></li>
    <li id="photo_link"><a href="#">PHOTO</a></li>
    </ul>

<div id="web_proekti">
 Some elements
</div>

<div id="design_proekti">
Some elements 
</div>  

<div id="photo_proekti">
Some elements 
</div>

Javascript file:

$('#web_link').click(function()
{
    $('#web_proekti').show();
    $('#design_proekti').hide();
    $('#photo_proekti').hide();
    $('#design_link').css('color','#999');
    $('#photo_link').css('color','#999');

}
);

$('#design_link').click(function()
{
    $('#design_proekti').show();
    $('#web_proekti').hide();
    $('#photo_proekti').hide();
    $('#web_link').css('color','#999');
    $('#photo_link').css('color','#999');

}
);

$('#photo_link').click(function()
{
    $('#photo_proekti').show();
    $('#design_proekti').hide();
    $('#web_proekti').hide();
    $('#design_link').css('color','#999');
    $('#web_link').css('color','#999');

}
);

Upvotes: 2

Views: 5208

Answers (2)

Robert Fricke
Robert Fricke

Reputation: 3643

You are changing color of the <li>, but not the link color.

To change the color of the <a>, try

 $('#photo_link a').css('color','#999');

instead of 

 $('#photo_link').css('color','#999');

Upvotes: 3

Панайот Толев
Панайот Толев

Reputation: 6607

You have to change the color from the <a> tag itself by adding a simple a after its parent id in the js:

$('#web_link').click(function()
{
    $('#web_proekti').show();
    $('#design_proekti').hide();
    $('#photo_proekti').hide();
    $('#design_link a').css('color','#999');
    $('#photo_link a').css('color','#999');

}
);

$('#design_link').click(function()
{
    $('#design_proekti').show();
    $('#web_proekti').hide();
    $('#photo_proekti').hide();
    $('#web_link a').css('color','#999');
    $('#photo_link a').css('color','#999');

}
);

$('#photo_link').click(function()
{
    $('#photo_proekti').show();
    $('#design_proekti').hide();
    $('#web_proekti').hide();
    $('#design_link a').css('color','#999');
    $('#web_link a').css('color','#999');

}
);

Upvotes: 1

Related Questions