Есть скриптик, до неприличия маленький. Может поэтому я и торможу :)
В index.php :
<div id="flavor-nav">
<a rel="all" class="current">All</a>
<a rel="cla">Classic</a>
<a rel="adv">Adventurous</a>
<a rel="tea">Tea-Inspired</a>
</div>
<br />
<div id="all-flavors">
<div class="flavor all cla">
<img src="images/flavor-curry.jpg" alt="" />
<h4>Sweet Curry With Saffron</h4>
<p>Lusciously mellow with notes of overripe berries, 55% Hawaiian dark chocolate meets its soulmate in sweet curry - awash in spices including coriander, tumeric, cumin and cardamom and sprinkled with rare saffron. This spicy melange is slowly steeped in fresh coconut puree and gently blended with the chocolate. The taste rushes over you in waves - fragrant curry, chased by coconut, then the lingering, raisiny sweetness of chocolate. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a> and <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>.</p>
</div>
<div class="flavor all adv">
<img src="images/flavor-maccupiccu.jpg" alt="" />
<h4>Machu Picchu</h4>
<p>Caramelized cacao nibs, with the bitter hints of the luxurious chocolate it will become, take this truffle to new heights. The nibs are crushed into a ganache of 65% Peruvian chocolate with a light touch of cinnamon and vanilla bean. Gail tops it off with crushed and candied almonds. The interplay of smooth and crunchy make this a warmly indulgent taste trip. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a>, <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>, and <a href="/store/products/Single_Origin_Chocolate_Collection-6-2.html">Single Origin Collection</a>.</p>
</div>
<div class="flavor all tea">
<img src="images/flavor-maccupiccu.jpg" alt="" />
<h4>Machu Picchu</h4>
<p>Caramelized cacao nibs, with the bitter hints of the luxurious chocolate it will become, take this truffle to new heights. The nibs are crushed into a ganache of 65% Peruvian chocolate with a light touch of cinnamon and vanilla bean. Gail tops it off with crushed and candied almonds. The interplay of smooth and crunchy make this a warmly indulgent taste trip. Available in <a href="/store/products/Chocolatier_s_Choice-5-2.html">Chocolatier's Choice</a>, <a href="/store/products/Adventurous_Collection-3-2.html">Adventurous Collection</a>, and <a href="/store/products/Single_Origin_Chocolate_Collection-6-2.html">Single Origin Collection</a>.</p>
</div>
</div>
и к нему JS для жукери:
$(function() {
var newSelection = "";
$("#flavor-nav a").click(function(){
$("#all-flavors").fadeTo(200, 0.10);
$("#flavor-nav a").removeClass("current");
$(this).addClass("current");
newSelection = $(this).attr("rel");
$(".flavor").not("."+newSelection).slideUp();
$("."+newSelection).slideDown();
$("#all-flavors").fadeTo(600, 1);
});
});
на всякий случай стили:
* { margin: 0; padding: 0; }
html { overflow-y: scroll; }
body { font: 12px Georgia; }
#page-wrap { width: 690px; margin: 20px auto; }
h1 { font: 30px Georgia; margin: 0 0 10px 0; }
.flavor { margin: 0 0 15px 0; clear: both; overflow: hidden; }
.flavor img { float: left; margin: 0 15px 0 0; }
.flavor p { float: left; width: 460px; }
#flavor-nav { margin: 0 0 15px 0; }
#flavor-nav a { padding: 2px 6px; border: 1px solid #A74C10; }
#flavor-nav a:hover, #flavor-nav a.current { background: #A74C10; color: white; }
Первый див - это управление по классам с пом. rel.
Второй див - таких может быть много и у каждого после all ставим свой класс. Все вроде просто.
Но если классов не 1, а 2 ? Например афиша - события(кино, балет и т.д.) и места(театры, клубы и т.п.).
Как в этом случае выбирать ?