Код:
<style> #menu span { padding: 7px 15px 7px; margin-right: 5px; margin: 10px 0; width: 100px; text-decoration: none; } #menu .tabactive { color: #2662DF; background:#F9F1DD; } #submenu { padding: 5px; height: 200px; text-align: center; font-size: 12px; width: 720px; } .submenutext { display: none; height: 60px; } </style> <script type="text/javascript"> $(document).ready(function() { $("td.#MenuTxT div.submenutext").hide(); <!--$(".tabs span:first").addClass("active").show(); --> $("td.#MenuTxT div.submenutext:first").show(); $("div.#menu span").click(function() { $("div.#menu span").removeClass("tabactive"); $(this).addClass("tabactive"); $("td.#MenuTxT div.submenutext").hide(); var activeDiv = $(this).attr("alt"); $("div."+activeDiv).fadeIn(); return false; }); }); </script> <center><table style="width: 615px;"> <tbody> <tr> <td> <div id="menu"> <b> <span alt=#sm1 "style="cursor: pointer;">Кнопка 1</span> <span alt=#sm2 "style="cursor: pointer;">Кнопка 2</span> <span alt=#sm3 "style="cursor: pointer;">Кнопка 3</span> <span alt=#sm4 "style="cursor: pointer;">Кнопка 4</span> <span alt=#sm5 "style="cursor: pointer;">Кнопка 5</span> </b> </div> </td> </tr> <tr> <td id="MenuTxT" align="center" valign="top"> <div id="submenu" align="center"> <div id="sm1" class="submenutext" style="display:block;"> <br/><br/> Контент 1-й кнопки </div> <div id="sm2" class="submenutext"><br /><br /> Контент 2-й кнопки </div> <div id="sm3" class="submenutext"><br /><br /> Контент 3-й кнопки </div> <div id="sm4" class="submenutext"><br /><br /> Контент 4-й кнопки </div> <div id="sm5" class="submenutext"><br /><br /> Контент 5-й кнопки </div> </div> </td> </tr> </tbody> </table></center>