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:

EDIT:
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!
Roi

Guys, I have implemented this and it works great. What I couldn’t do is to keep the Selected tab with a certain colour
https://chernolya.wixsite.com/pdf-out/Documentation/CreateProcess-function
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!
Roi

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:
[u]https://www.marisaypurdy.com/menu-effects-test-page[/u]

Here’s the code:

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

function workHover(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#3C958B](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.C958B) "> ${$w(" [#workMenu](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.orkMenu) "+index).text} </h5>; }

function workUnHover(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#0F1227](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.F1227) "> ${$w(" [#workMenu](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.orkMenu) "+index).text} </h5>; }

function workOnClick(index){ $w(" #workMenu "+index).html = <h5 style = "color: [#FCB449](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.CB449) "> ${$w(" [#workMenu](https://www.wix.com/code/home/forum/search/posts%3Fquery=.num.orkMenu) "+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.

http://skoodleart.com/