Простенькое горизонтальное меню
Привет всем. Есть задача... не знаю пока как подойти к ней и решить.
есть небольшое горизонтальное меню: <style type="text/css"> div.mainMenu { background:#eaeaea; height:21px; padding:10px; } div.mainMenu a { font:normal 12px Arial, Helvetica, sans-serif; color:#333; margin:0 15px; } div.mainMenu a:hover { text-decoration:none; } div.podMenu{ display:none; padding:10px; background:#000; } div.podMenu a{ font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; } </style> </head> <body> <div class="mainMenu"> <a href="#">Афиша города</a> <a href="#">Объявления</a> </div> <div class="podMenu afisha"> <a href="#">Кинотеатры</a> <a href="#">Мероприятия города</a> <a href="#">Музеи</a> <a href="#">Театры</a> </div> <div class="podMenu advertisement"> <a href="#">Продам</a> <a href="#">Куплю</a> <a href="#">Обменяю</a> </div> </body> по умолчанию <div class="podMenu"> скрыт мне надо чтобы при клике по ссылке "афиша города" открылся блок с классом "afisha", при клике по "Объявления" предыдущий див скрылся а открылся блок с классом "advertisement". Вот как такое решить...не могу придумать.... |
<style type="text/css"> div.mainMenu { background:#eaeaea; height:21px; padding:10px; } div.mainMenu a { font:normal 12px Arial, Helvetica, sans-serif; color:#333; margin:0 15px; } div.mainMenu a:hover { text-decoration:none; } div.podMenu{ display:none; padding:10px; background:#000; } div.podMenu a{ font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> <script type="text/javascript"> function podmenu(menu) { $('.podMenu').hide(); $('.' + menu).show(); } </script> <div class="mainMenu"> <a href="#" onclick="podmenu('afisha')">Афиша города</a> <a href="#" onclick="podmenu('advertisement')">Объявления</a> </div> <div class="podMenu afisha"> <a href="#">Кинотеатры</a> <a href="#">Мероприятия города</a> <a href="#">Музеи</a> <a href="#">Театры</a> </div> <div class="podMenu advertisement"> <a href="#">Продам</a> <a href="#">Куплю</a> <a href="#">Обменяю</a> </div> |
Да код работает...но можно ли как то обойтись без ONCLICK на ссылке в теле документа?! Прописать его как то в самом скрипте...
|
Ну тогда так:
<style type="text/css"> div.mainMenu { background:#eaeaea; height:21px; padding:10px; } div.mainMenu a { font:normal 12px Arial, Helvetica, sans-serif; color:#333; margin:0 15px; } div.mainMenu a:hover { text-decoration:none; } div.podMenu{ display:none; padding:10px; background:#000; } div.podMenu a{ font:normal 12px Arial, Helvetica, sans-serif; color:#FFF; } </style> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script> <script type="text/javascript"> $(function() { $('.mainMenu a').click(function() { $('.podMenu').hide(); switch($(this).text()) { case 'Афиша города': $('.afisha').show(); break; case 'Объявления': $('.advertisement').show(); break; } }); }); </script> <div class="mainMenu"> <a href="#">Афиша города</a> <a href="#">Объявления</a> </div> <div class="podMenu afisha"> <a href="#">Кинотеатры</a> <a href="#">Мероприятия города</a> <a href="#">Музеи</a> <a href="#">Театры</a> </div> <div class="podMenu advertisement"> <a href="#">Продам</a> <a href="#">Куплю</a> <a href="#">Обменяю</a> </div> |
Часовой пояс GMT +3, время: 12:17. |