Change text color on div Click

Question

0.00/5 (No votes)

See more:

Hi
I am trying to navigate to different pages on click on the

While doing that i want to change the color of the text as red. It looks simple but i googled many things not able to get the proper answer.
my code:

HTML

<div id="divMyInformation">
                <table cellpadding="0" cellspacing="0" class="vertNavMyInfo" id="tblMyInformation">
                    <tr class="lvl1" onmouseover="OnMouseHoverColor(this)"  önmouseout="OnMouseOutColor(this)">
                        <td class="imgLinks">
                            <div  önclick="location='../Home/MyPage.aspx'">My Page
                            </div>
                        </td>
                    </tr>
                    <tr class="lvl1" onmouseover="OnMouseHoverColor(this)"  önmouseout="OnMouseOutColor(this)">
                        <td class="imgLinks" >
                            <div  önclick="location='../Home/MyPage1.aspx'">
                                My Page1                                                                
                            </div>
                        </td>
                    </tr>
                    <tr class="lvl1" onmouseover="OnMouseHoverColor(this)"  önmouseout="OnMouseOutColor(this)">
                        <td class="imgLinks" >
                            <div  önclick="location='../Home/MyPage2.aspx'">
                                My Page2
                            </div>
                        </td>
                    </tr>                    
                </table>
            </div>

Posted 12-Nov-13 2:18am

sasen903

Updated 12-Nov-13 3:02am

v3

Add a Solution

Comments

swapnil_jadhav 12-Nov-13 8:29am

Can you please elaborate as in you need to change the text color of "My Page" or any other text

sasen903 12-Nov-13 8:34am

yes I want to change the "My Page" text color but only when i clicked on to it.
mean
there is a navigation
my page
my page1
My page2
After click on my page it should navigate to my page and change the color of my page as red. Rest of the pages(my page1, my page2) should remain black.

♥…ЯҠ…♥ 12-Nov-13 8:39am

Its browser functionality I believe, you want to intimate user that link is visited already kind of right?

sasen903 12-Nov-13 8:40am

Yes

swapnil_jadhav 12-Nov-13 8:44am

Ok you can create a class in your css file as
.MyPage
{
color:red;
}

and on click of the above div you can add the class to it

for example:

<div önclick="location='../Home/MyPage.aspx'" id="MyPage">My Page</div>

$(document).ready(function(){
$('#MyPage').click(function() {
$('#MyPage').addClass('MyPage')
});
});

If possible please give me your complete code so i can write it neatly or it is good if you understand from the above example i have given :)Happy Coding!

Morgan Estes 12-Nov-13 8:54am

Is there a reason you're choosing to use a div for navigation instead of an a?

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

♥…ЯҠ…♥ · Answer 1 · 2013-11-12T02:50:00

Solution 1

Hi sasen,

Try this code

XML

<!DOCTYPE html>
<html>
<head>
<style>
.clicked {color:red;}
</style>
<script type="text/javascript">
$('#clickMe').click(function() {
 alert('Test');
 $('#clickMe').addClass("clicked");
});
</script>
</head>
<body>
<div id="clickMe"> Click me </div>
</body>
</html>

Hope this helps you a bit.

Regards,
RK

Posted 12-Nov-13 2:50am

♥…ЯҠ…♥

Comments

Morgan Estes 12-Nov-13 8:53am

This example only works of you're using the jQuery library. Be sure to add it in, or go with a vanilla JS solution.