How Do I Change Color Of Tab When Any Of Tab Is Clicked?

Question

0.00/5 (No votes)

See more:

here is my html code

XML

<div id="header">
        <div id="menu">
            <ul class="current_page_itemm">
                <li class="current_page_item"><a href="Home.aspx">Home</a></li>
                <li><a href="JobSeekerlogin.aspx">Jobseeker Profiles</a></li>
                <li><a href="#">Employer Profiles</a></li>
                <li><a href="#">Jobs</a></li>
                <li><a href="#">More</a></li>

</ul>
        </div>
</div>

and here is css code :

CSS

#menu ul {
    margin: 0;
    padding: 25px 0 0 20px;
    list-style: none;
    line-height: normal;
}

#menu li {
    display: block;
    float: left;
}

#menu a {
    display: block;
    float: left;
    margin-right: 17px;
    padding: 5px 8px;
    text-decoration: none;
    font: 20px Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
}

#menu a:hover {
    text-decoration: underline;
    background: #910000;
    color:#FFFFFF;
 }


#menu a:active{
    background: #910000;
    color:black;
}

plz help me to get the color change effect after clicking of any tab so that user should know under which tab they are working?

Posted 24-Jun-14 0:35am

HellHotie

Add a Solution

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)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-06-24T01:02:00

Solution 1

jQuery

Little bit of jQuery would do this trick. We are adding a class ('selected') dynamically on click of Tab.

JavaScript

$(document).ready(function () {
    $('#menu ul li a').click(function (ev) {
        $('#menu ul li').removeClass('selected');
        $(ev.currentTarget).parent('li').addClass('selected');
    });
});

CSS

#menu ul li.selected {
    background: #910000;
    color:#FFFFFF;
}

Demo

[Demo] Change Background Color of Tab on Tab Click[^]

Posted 24-Jun-14 1:02am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Comments

HellHotie 24-Jun-14 13:57pm

I tried it but is not yet working

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 30-Jun-14 11:16am

Did you see the Demo? It is working correctly. See what exactly you are missing. If you face further issues, then reply me.

HellHotie 15-Jul-14 16:21pm

i am using asp.net and my menu is on masterpage. problem is still there i can get hovering effect and everythng just problem is with after click. i tried with your code too

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 15-Jul-14 22:21pm

I guess the id of menu is different. Can you just see the source html and check the id of menu?

HellHotie 16-Jul-14 4:41am

I am posting css code again

/* Menu */

#menu {
float: left;
width: 680px;
height: 40px;
}

#menu ul {
margin: 0;
padding: 25px 0 0 20px;
list-style: none;
line-height: normal;
}

#menu li {
display: block;
float: left;
}

#menu a {
display: block;
float: left;
margin-right: 17px;
padding: 5px 6px;
text-decoration: none;

font: 18px 'Open Sans', Helvetica, sans-serif;

color: #FFFFFF;
}

#menu a:hover {
text-decoration: underline;
background: #910000;
color:#FFFFFF;
}

#menu a:active{
background: #910000;
color:black;
}

#menu ul li.selected {
background: #910000;
color:#FFFFFF;
}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 16-Jul-14 7:29am

I am asking you to check if the id of menu is "menu" or not? For that, check the source HTML.

HellHotie 18-Jul-14 1:03am

Is there any asp.net project or article for me to refer to about above topic?

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 18-Jul-14 3:34am

Have you searched? Didn't this answer help you much?

HellHotie 20-Jul-14 2:08am

Thanks buddy .. it's working.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 20-Jul-14 10:11am

Cool. Welcome. :)

HellHotie 17-Jul-14 6:50am

<div id="header">
<div id="menu">
<ul class="current_page_itemm">
<li class="current_page_item">Home</li>
<li>Job Seeker</li>
<li>Employer</li>
<li>AboutUs</li>
<li>ContactUs</li>
</ul>
</div>
<div>
It is menu