div content change by menu

[kimikai]

I know there's a way to do this and I've done something similar before, but right now I just cant seem to get it right

what I'm trying to create is have a full working menu (so buttons have their own background and hover effect and all)
and by clicking on a menu button a div with the corresponding text appears with a fade in the text div.

I tried to base it on this one: http://jsfiddle.net/3mJ3z/
buuuut...in my magic world with even litterally copying the codes its not working

aaand really i have no idea what im doing wrong...

i implemented the html part into a wrapper div for the menu and i put the javascript part in <script type="text/javascript></script> brackets at the bottom of my html page right above </body>

[Beverleyh]

Without seeing your actual page, its hard to say what is wrong exactly, although I will hazard a guess at it being to do with the <li>s data-item attribute, as used in the script - that's an HTML5 thing so if your page isnt using an HTML5 DOCTYPE (indicated by your use of type="text/javascript in the script tag, which isn't necessary in HTML5), I dont think it will work. (You've missed a " at the end of type="text/javascript BTW, but I don't know if that's just a typo in the forum - I believe that the omission in an actual web page can cause problems too)

Other reasons could be that the links to your jQuery library are incorrect OR that you have other conflicting jQuery scripts throwing a spanner in the works.

For more help, please provide a link to your actual page.

[kimikai]

ye the " was a typo
the problem is atm there isnt much of an actual page yet, because im still screwing around with that part...which is the main part of the whole website...
the link is just a code i happened to find and tried to use... are there any options to acquire the same result w/o HTML5?

I'm new to JS but I'm willing to get a hand on it and figure it out but I havent found a way to get this done yet

aaand indeed no html5 doctype....any possibilities to change the html5 part in that code into something thats html compatible w/o losing the standard result?

[Beverleyh]

Don't worry about using HTML5 - you can pretty much just switch in the new DOCTYPE and all your usual divs will still work the same. Its just that HTML5 introduces so new markup options that help search engines understand a web page structure more easily, and a few new features that make things like forms and embedded media easier to handle. Backwards compatibility isn't an issue either hen the html5shiv is included.
Here's a sample HTML5 page structure (with html5shiv included) to get you started: http://www.sitepoint.com/a-basic-html5-template/

[kimikai]

so all i have to do is change the head part of my html page into html5? and then i guess i can style the <li> parts of that code with css3?
also...any examples maybe on how id have to name my css parts to give backgrounds to the <li>'s?

[Beverleyh]

so all i have to do is change the head part of my html page into html5? and then i guess i can style the <li> parts of that code with css3?

Yes, that's about it. Although I recommend using the new markup tags ("article", "header", "footer", "nav", etc) to give your web page structure more meaning for search engines.

also...any examples maybe on how id have to name my css parts to give backgrounds to the <li>'s?

I'm not sure what you mean. You can give any class name you like to your <li> elements - but "button" would seem an obvious choice so when you look back at your CSS you'll immediately see what it affects.

[kimikai]

for example for this line: <li class="change-item" data-item="1">Item 1</li> it is in a <ul>
but i have diff backgrounds for each <li> soo... i was wondering if theres a certain way id have to build up my CSS
like normally you'd use #ul li { background:blablabla; } but is there a way to use something like #ul li data-item="1" { background:blablabla;}

if that makes any sense... because right now ill need diff classes for each <li> to make the whole code work in general

PS. the rest i had problems with seems fixed =)

[Beverleyh]

I believe so;

#ul li[data-item="1"] { background:red; }

I haven't tested it though. To be honest, I'd just add an extra class for each button and style that instead;

#ul li.button1 { background:red; }
#ul li.button2 { background:yellow; }

<li class="change-item button1" data-item="1">Item 1</li>
<li class="change-item button2" data-item="1">Item 1</li>

[kimikai]

mhm ye i guess the fiddle code aint bad but it could use some extra tweaking to get it more personizable
i guess 2 classes would be easiest to get the hover and stuff implemented

yup yup i guess that will fix my problems haha, guess i should stop thinking like website building is some kind of impossible equasion because im missing the simplest solutions atm

[Beverleyh]

i guess 2 classes would be easiest to get the hover and stuff implemented

That's easy to do in CSS with the hover pseudo class instead of an actual second class in the markup

#ul li.button1 { background:red; }
#ul li.button1:hover { background:blue; }
#ul li.button2 { background:yellow; }
#ul li.button2:hover { background:green; }

And the markup stays the same;

<li class="change-item button1" data-item="1">Item 1</li>
<li class="change-item button2" data-item="1">Item 1</li>