Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Простенькое горизонтальное меню (https://javascript.ru/forum/jquery/17416-prostenkoe-gorizontalnoe-menyu.html)

dimi007 18.05.2011 16:56
Простенькое горизонтальное меню
 
Привет всем. Есть задача... не знаю пока как подойти к ней и решить.
есть небольшое горизонтальное меню:
<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".

Вот как такое решить...не могу придумать....

kostr 18.05.2011 19:04 
<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>

dimi007 18.05.2011 19:30
Да код работает...но можно ли как то обойтись без ONCLICK на ссылке в теле документа?! Прописать его как то в самом скрипте...

kostr 18.05.2011 21:58
Ну тогда так:
<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, время: 18:00.