Change the Text Color On Click

Hi there! I am working on a Pricing Guide Page and have some Tabs located on the top of the page. Click on a tab and the pricing guide associated with that category is shown. What I would like to do is have the Tab’s Text Change Color when Clicked and Active, much like you would see in a Navigation Menu when a Page is clicked and active. I set an OnClick Event, and played around with some code, but when I clicked the text in preview, it simply disappeared instead of changing color. Lol Not exactly what I was trying to accomplish. This is the code I was experimenting with:

export function corporatePlans_click(event) {
//Add your code for this event here:
$w(‘#corporatePlans’).html = “CORPORATE PLANS ”;

Any ideas?

Hi, please take a look at the Text API reference, it has information regarding styles:

To be more specific, instead of the “Paragraph” tag, you should use the “p” tag with class “p1”:

$w('#corporatePlans').html = "<p class='p1'>CORPORATE PLANS <span style='color: #BADA55'>colored text</span></p>";

Let us know if it worked for you :slight_smile:

Thank you! I did a search on the API reference page before I posted and oddly, that didn’t come up in the search. Thank you for the link! I will study that and try again. I’ll post if I am successful. Thank you!

1 Like

Yay!! I did it! It took me a little while because I was trying to figure it out without your hint, but I did finally have to look to see what I was doing wrong (placing the text content on the wrong side of the span style!). But, I was able to change the color, add an accent line underneath, and expand the pricing box with a click, and reverse all of it for the other options - all with code! Thank you, Wix!!

1 Like

That’s great to hear, thanks!

1 Like

I m trying to do the same (color changing on hovering) but with box, not text. Couldn’t find how to do that. Can I have some help with it Tomer? :slight_smile:

Hi Olya,
Box element doesn’t have html key.
It is possible to change the color with “HoverBox” element from the editor without code.

Good luck!

Guys, I have implemented this and it works great. What I couldn’t do is to keep the Selected tab with a certain colour
here s the link
tabs in Syntax
as you can see it doesn’t work as tabs)
what can I do here?
Thank you in advance, the forum helps a lot!

Hi Olya, I see that you got it fixed
Good job!

I’m also trying to set up a sort of menu using hover and click events, but I’ve hit a problem. What I’m trying to do with my code is make a little menu that, when you hover on a menu item (" #workMenu " + index), it changes from navy ( #0F1227 ) to teal ( #3C958B ) and changes back to navy on mouseOut. Then I would like to code it so that when you click on a menu option, it changes to orange ( #FCB449 ) and stays there even on mouseOut until I click another menu option, at which point it turns navy again. I have all of this hooked up to a repeater and a database so that as I click different menu options, it displays different pictures from my database. The problem is that my code is making it so that the 2 actions interfere with each other. If I click something, it turns orange, but it’s changing back to navy as soon as I take my mouse away rather than staying orange until I click a new menu item.

Does anyone know how to help me fix this issue?

Here’s the link to the test page I’m working with if you want to see what I mean:

Here’s the code:

$w.onReady( function () { });

function workHover(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#3C958B]( "> ${$w(" [#workMenu]( "+index).text} </h5>; }

function workUnHover(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#0F1227]( "> ${$w(" [#workMenu]( "+index).text} </h5>; }

function workOnClick(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#FCB449]( "> ${$w(" [#workMenu]( "+index).text} </h5>; }

You will obtain the entire set of sketch that a child required. Let your child generate the world full of colors using this glorious low price Color Kit. The art set contain of a plastic box with some pull-out trays containing 46 different art items, including paints and brushes. Make flowers, characters, landscapes and even personalised greeting cards all with your own fingers by using this Color kit.