“Tab” navigation for a site is easy to create with CSS, and you can use PHP to bring the tab for the current page to prominence (the subject of an upcoming article). More complex is an “in-page” content tab system, where you want to have a series of “slides” stacked on top of each other on a single page, with an arrangement of tabs on top to choose between them. It’s relatively easy to activate the slides when the user hovers over the tab, but changing the slides “on click” is a bit harder to capture. Thankfully, there is a new CSS3 pseudo-element selector, First, let’s create some basic markup. Let’s say we were going to create a series of slides about some of Saturn’s moons: Titan, Mimas, Enceladus and Iapetus. We’ll follow the basic markup of our simple image gallery example: the names of the moons are clickable definition terms, and our explanation and illustration of each is definition declarations. Note the id’s on each There are a few ways to explain :target, that can do the work for us. <dd>, and the href links within each <dt>. These go to anchor links, just as we have explored in the past. Next, the associated CSS to produce the basic appearance of the tabs:target: you might think of it as the CSS equivalent to the for attribute in forms, except that it is used for everything else. Essentially it makes CSS aware of the relationship between id’s and links to those id’s, so that when links are clicked on we change the style of the target. In this case, we are altering the z-index of the target to an arbitrary number above 1.
- Titan

Saturn's largest moon is unique in several respects: it is the only known satellite in the solar system to have a dense atmosphere (one primarily composed of nitrogen), and the only known to have lakes on its surface (as it is far too cold to support liquid water, these bodies are liquid methane).
Titan was discovered in 1655 by the Dutch astronomer Christiaan Huygens. Today, the moon is considered by many scientists to be a possible habitat for non-terrestrial life. Its atmosphere is similar to that of the early Earth, and the potential of an "underground sea" of liquid water, along with tantalizing chemical imbalances in the atmosphere and crust, suggest that simple life may be present, operating in a methane, rather than water-based, environment.
- Iapetus

Iapetus, the third largest moon of Saturn, is fascinating both tonally and morphologically: its stretched shape and equatorial ridge cause it to resemble nothing so much as a walnut, while the extreme difference in albedo between one hemisphere and the other bring to mind an Oreo cookie. It also has a significant crater, Turgis, that is nearly 40% of the moon's diameter, with a rim scarp that towers 15 kilometres high.
- Enceladus

Discovered by Fredrick William Herschel in 1789, tiny Enceladus is one of only three known bodies in the outer solar system with active volcanoes, the other two being the moons of Io and Triton. In the case of Enceladus, these are cryovolcanoes: eruptions of water, nitrogen and ammonia, rather than molten rock.
Just 500 kilometres in diameter, Enceladus is far too small to generate its own heat. Instead, its geological activity is mostly likely caused by its orbit around Saturn, with the gas giant constantly pulling and squeezing on the small satellite, warming the interior of the moon.
As a source of water, Enceladus is conjectured to harbour life, while also being the wellspring for the ice crystal content of Saturn's E ring.
- Mimas

Mimas was discovered by William Hershel, the same year as Enceladus. The most remarkable feature of Mimas is its massive primary impact crater, which from certain angles causes the moon to look very much like the Death Star from Star Wars. The crater, named after its discoverer, is over 130 kilometres across: if a crater of equivalent scale was formed on Earth, it would be wider than Canada.
Mimas is also remarkable for the fact that it is the smallest object in the solar system to have formed into a sphere under the influence of its own self-gravitation.
I agree, Ian - while this will work for a short page, in longer pages (as in the blog) the jump-to-location behavior is somewhat annoying. Let me look into a solution...
so we don't need the jQuery minimum length anymore:) cool!


