Показать и скрыть меню (где отображается только один за раз)

Question

У меня есть такая проблема, у меня есть меню, в котором есть скрытый субконтент. Когда пользователь нажимает кнопку nav, появляется скрытый контент. Эта часть прекрасна и работает.

Что мне нужно знать, когда у меня есть один элемент навигации, показывающий его скрытый контент. Если пользователь нажимает на следующий элемент навигации. Я хотел бы, чтобы другой скрытый контент исчез и появился новый скрытый контент.

Мое вдохновение исходит от этого сайта. http://www.o2.co.uk/, если вы нажмете на пункты стрелки nav. Любая помощь в этом была бы замечательной. Кстати, все эффекты Show и Hide работают.

Спасибо Всем, кто может помочь ..

Answer 1

Я предполагаю, что вы делаете это в JavaScript. Простите меня, если я буду слишком элементарно здесь.

Ваша функция (если вы можете опубликовать ее, это было бы полезно), необходимо не только изменить атрибут отображения элемента, который вы нажали, но и изменить его для отображения: none; для других.

Поэтому, когда вы нажимаете на элемент nav, ваш javascript изменяет атрибут отображения для этого списка: block или что-то еще, и ALSO изменяет все остальные списки для отображения: none. Это небольшая грубая сила, поэтому вы также можете просто изменить любые другие, в настоящее время что-то другое: none to: none.

Answer 2

Вам нужно JQuery для этого, но ...

сначала связать функцию OnClick к каждому элементу с классом «ссылку» мы говорим, что OnClick, что по клику, спрячьте все элементы с классом «hidable», а затем показать div с идентификатором значения атрибута rel в этой ссылке. http://api.fatherstorm.com/test/4159899.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
     <script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script> 


    <script> 
      $(document).ready(function() { 
       $('.link').each(function(){ 
        $(this).click(function(){ 

         $('.hidable').hide(); 
         $($(this).attr('rel')).show(); 
        }); 

       }); 
      }); 

     </script> 



<ul> 

    <li class='link' rel='#div1'>l1</li> 
    <li class='link' rel='#div2'>l2</li> 
    <li class='link' rel='#div3'>l3</li> 
    <li class='link' rel='#div4'>l4</li> 
    <li class='link' rel='#div5'>l5</li> 

     </ul> 

    for the code block 
    <div class='hidable' id='div1'>div 1</div> 
    <div class='hidable' id='div2'>div 2</div> 
    <div class='hidable' id='div3'>div 3</div> 
    <div class='hidable' id='div4'>div 4</div> 
    <div class='hidable' id='div5'>div 5</div> 

Answer 3

Привет FatherStorm и Bikeboy389,

Спасибо за ваши комментарии. Да, используя JQuery. Это то, что у меня есть до сих пор.

Jquery

<script type="text/javascript"> 
    $(function() { 
     $("#nav-box").hide(); 
     //run the currently selected effect 

     function runEffect(){ 
      //get effect type from 
      var selectedEffect = $('#effectTypes').val(); 
      var options = {}; 
      //run the effect 
      $("#nav-box").toggle("blind",options,500); 
      $(this).toggleClass("active").next().slideToggle("slow"); 
     }; 

     //set effect from select menu value 
     $("ul#main-nav li a.kingfisher").click(function() { 
      runEffect(); 
      return false; 
     });//Close Run Effect Function 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.kingfisher").click(function(){ 
       $(this).toggleClass("active").next(); 
      }); 
     }); 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.kingfisher").click(function(){ 
       $(".curve").toggleClass("active").next(); 
      }); 
     }); 

    });//Close Main Function 

    $(function() { 
     $("#nav-box").hide(); 
     //run the currently selected effect 

     function runEffect(){ 
      //get effect type from 
      var selectedEffect = $('#effectTypes').val(); 
      var options = {}; 
      //run the effect 
      $("#nav-box").toggle("blind",options,500); 
      $(this).toggleClass("active").next().slideToggle("slow"); 
     }; 

     //set effect from select menu value 
     $("ul#main-nav li a.dsm").click(function() { 
      runEffect(); 
      return false; 
     });//Close Run Effect Function 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.dsm").click(function(){ 
       $(this).toggleClass("active").next(); 
      }); 
     }); 

     $(document).ready(function(){ 
      $("#nav-box").hide(); 
       $("ul#main-nav li a.dsm").click(function(){ 
       $(".curve").toggleClass("active").next(); 
      }); 
     }); 

    });//Close Main Function 
    </script> 

И HTML является

<ul id="main-nav"><!--Open Main Navigation with JQuery Dropdown--> 
      <li><a href="#" class="dsm">dsm Products</a></li> 
      <li><a href="#" class="kingfisher">kingfisher Products</a></li> 
      <li><a href="#" class="covertec" >covertec</a></li> 
     </ul><!--Close Main Navigation--> 

<div id="nav-box"> 
     <div class="kingfisher"> This is the content for the Kingfisher Products</div> 
     <div class="dsm">This is the content for the DSM products</div> 
    </div> 

Надежда это делает немного больше смысла,

Fatherstorm, Thats именно то, что мне было нужно. На вашем примере есть способ, которым вы можете скрыть все div, когда страница загружается, а затем есть опция, по которой нажимать ссылку?