jquery addClass() function

Question

This is the css i'm trying to apply to all the keywords

#showKeywords {
    background-color:#5B1762;
}

What i want to do is when you click the showKeywords button the keywords are highlighted. However instead of highlighting the keywords it applies the css style to the button. I notice that the id of the button and the name of the css style are the same. How can I change the .keyword class without changing the button (showKeywords) style

 $(document).ready(function() {
    $("#showKeywords").click(function() {
        $(".keyword").addClass("showKeywords");
    });

<div id="menuDiv">
    <span id="showVariables" class="button">Variables</span>
    <span id="showKeywords" class="button">Keywords</span>
</div>
<br>
&nbsp;&nbsp;
<span class="keyword">public</span> 
<span class="keyword">static</span>
<span class="keyword">void</span> main(String args[]) {

I'm not allowed to change the name of the #showKeywords or I would have done that.

You don't actually have a "showKeywords" class in your stylesheet (not one that we can see anyway) — Phil
– Phil, Commented May 29, 2015 at 1:29

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Try changing

#showKeywords {
    background-color:#5B1762;
}

to

.showKeywords {
    background-color:#5B1762;
}

The '#' character in front of showKeywords means that the styles are only shown for an element with an id of 'showKeyWords.' What you want is a CSS class, designated with a period.

EDIT

If you aren't allowed to change the existing CSS, you'll have to add a style tag to your HTML. Put the following code inside that page's <head> tag, or at the top of the file if you're using a layout page.

<style type="text/css">
    .showKeywords {
        background-color:#5B1762;
    }
</style>

And finally, if you would like to prevent the showKeyWords button from being that color as well, just change the id of the showKeyWords button in your HTML and JavaScript to something different.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 29, 2015 at 1:25

johnnyRose

7,53017 gold badges43 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3491583 Over a year ago

I'm not allowed to change the existing css :c

user3491583 Over a year ago

Yea I just added existing css as a class and it works.

Collectives™ on Stack Overflow

jquery addClass() function

1 Answer 1

EDIT

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

EDIT

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related