For example - I have a menu at the top of each page that lists 6 areas/sections.

What I want- For the tab that is currently selected - it will cause the li element to have the class "selected". Any ideas on how to do this? I am not quite sure what to google.

Here is an example:

<ul id="tabs"> <!-- start tabs -->
<li class="selected"><a href="0">home</a></li>
<li><a href="1">donkey dick</a></li>
<li><a href="2">samples</a></li>
<li><a href="3">FAQs</a></li>
<li><a href="4">pricing</a></li>
<li><a href="5">weblog</a></li>
</ul>

8/6/2008 9:20:14 PM

lots of ways with PHP
is this in a CMS like Wordpress, or built from scratch?

On something like Wordpress, you can use built-in functions like is_page() to return true/false based on the ID or name of a page.
For example, I have this code in my header.php for this site - http://teamkendatire.com/

		<ul class="nav">
			<li><a <? if(is_page('7')) { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>">Home</a></li>
			<li><a <? if(is_page('team') or is_page('teammember')) { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>/team">Team</a></li>
			<li><a <? if(!is_page()) { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>/news">News</a></li >
			<li><a <? if(is_page('schedule')) { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>/schedule">Schedule</a></li>
			<li><a <? if(is_page('results')) { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>/results">Results</a></li>
			<li><a <? if(is_page('gallery') || get_the_title($post->post_parent) == 'Gallery') { echo "id=\"current\""; } ?> href="<?php bloginfo('url'); ?>/gallery">Gallery</a></li> 
		</ul>

8/6/2008 9:30:05 PM

do you mean that when they hover over or select that tab, that it shows up differently than the others? are you wanting it to show up as the selected class when they're on that page? because those are two different things:

if you want it to change when it's hovered over, you're going to want to do something like:

#id li a {background-color: black;}
#id li a:hover {background-color: white;}

#id li a {background-color: black;}
#id li a.selected {background-color: white;}

8/6/2008 9:30:06 PM

I am not looking for a hover option - I got how to do that - I want it so that when the "Home" tab is selected it gets a class called "selected". And if I select "donkey dick" it then gets the clas "selected". I do not want to create a separate menu for each page so that's out of the question.

agentlion I might be able to make what you have work. I need to do some google work.

8/6/2008 9:38:18 PM

A few months ago I read a really neat way to do this in just CSS/XHTML. I wish I could remember where.

8/6/2008 9:50:06 PM

i like to do something like this:

The CSS:

.home #home, 
.donkey #donkey, 
.samples #samples, 
.faqs #faqs, 
.pricing #pricing, 
.weblog #weblog {
    font-weight: bold;
    border: 1px solid #FF0000;
}

<ul id="tabs" class="home">
    <li id="home">...</li>
    <li id="donkey">...</li>
    <li id="samples">...</li>
    <li id="faqs">...</li>
    <li id="pricing">...</li>
    <li id="weblog">...</li>
</ul>

8/6/2008 9:51:41 PM

agentlion's way is super complicated for what you want to do



think logically


if you have a selected state, then you also need to define an unselected state

you can take it a step further and create a highlighted state if you want, too


it's no different from defining different test colors for links visited, highlighted, active, or whatever. you apply the same principles.

[Edited on August 6, 2008 at 9:59 PM. Reason : ^ he's on the right track. do it all in CSS and it'll look awesome and be easy to parse]



here's a tutorial since I don't feel like coding for you atm

http://htmldog.com/articles/tabs/

[Edited on August 6, 2008 at 10:03 PM. Reason : ...]

8/6/2008 9:56:59 PM

yeah i left out some other css for the standard (unselected) tabs, but you get the idea.

actually, here is a trimmed down copy & paste of what i've done. feel free to use it and/or improve on it. obviously the links here are just for demonstration.

8/6/2008 11:22:07 PM

Quote :

"agentlion's way is super complicated for what you want to do"

if you read the code, it's not complicated at all. It's just ugly, and not elegant (like I said when I wrote it). but complicated? no

8/6/2008 11:30:16 PM

any time you start inserting if statements in your code instead of doing it in the CSS it gets unelegant - and as a result in my eyes, complicated.


maybe we have different definitions

8/7/2008 8:57:48 AM

When you mean the tab that is currently selected do you mean like thats the page you're on? (for example home, pricing, etc).

You could also use a similar thing to what DirtyMonkey did with no variables or anything, just css.

CSS:

#home .home, 
#donkey .donkey, 
#samples .samples, 
#faqs .faqs, 
#pricing .pricing, 
#weblog .weblog {
    font-weight: bold;
    border: 1px solid #FF0000;
}

<body id="home">

<ul id="tabs" >
    <li class="home">...</li>
    <li class="donkey">...</li>
    <li class="samples">...</li>
    <li class="faqs">...</li>
    <li class="pricing">...</li>
    <li class="weblog">...</li>
</ul>

8/7/2008 9:58:34 AM

you still have to use a variable to set the current tab, unless you're going to do it statically. and if you're going to do that then why not just keep it the way i had it and instead of using a variable, just put the tab name for the ul class?

not trying to be too picky here, but also i don't like the idea of having a different "id" tag for body for each page. id's should remain constant, the class can change.

8/7/2008 10:04:14 AM

I agree if the pages are dynamic or if its a large site you might as well use variables. For a simple way to do it statically, this works fine though, just throwing options out there. The way you have it works too, but this would let you change whole color themes and stuff without changing a lot of css.

I don't see anything wrong with having id's for each page's body tag, its not like the id is being used anywhere else. Sure what its being applied to in essence ends up with multiple id's but not on the same page.

[Edited on August 7, 2008 at 11:33 AM. Reason : .]

8/7/2008 11:32:25 AM

that's my point, the id *should* be the same on all pages. what if you need to get an element by that ID and never know what it's going to be? i'm just saying to use body class="tagname" instead of id.

8/7/2008 11:58:54 AM

nacstate, shut the hell up.. you don't know what the f*ck you are talking about! Oh wait.. yes you do. LOL. I never even thought about assigning an id to the body tag. Smart man, I see I have taught you will. Now I just gotta get you to start coding PHP and I can retire. LOL. I got jokes.

8/7/2008 12:19:37 PM

end(explode('/', $_SERVER['PHP_SELF'])) will get you whatever page you're on btw

if you're on http://www.lolabooger.org/donkey.php will return 'donkey.php

good a variable as any to check against'

8/7/2008 12:33:32 PM