显示，并具有

Question

林这样的问题隐藏菜单（其中只显示一次一个），我有了一些隐藏的子内容的菜单。当用户点击导航按钮时，会出现一些隐藏的内容。这部分是好的，所有的工作。

我需要知道的是，当我有一个导航条显示它的隐藏内容。如果用户点击下一个导航项。我希望其他隐藏的内容消失并显示新的隐藏内容。

我的灵感来自这个网站。 http://www.o2.co.uk/如果您点击导航箭头项目。任何对此的帮助都会很大。顺便说一下，所有的显示和隐藏效果都起作用。

感谢任何人谁可以帮助..

Answer 1

我假设你在JavaScript这样做。如果我在这里太小学了，请原谅我。

你的功能（如果你可以发布它，那将是有益的），不仅需要改变你点击的元素的显示属性，但也将其更改为显示：无;为其他人。

因此，当您点击导航条，你的JavaScript改变该列表的显示属性：块或什么，也改变了其他所有的名单显示：无。这是一个有点暴力，所以你也可以改变其他目前的东西：none：无。

Answer 2

你需要的jQuery的这一点，但...

首先我们打个的onClick函数与类的“链接” 每一个元素我们告诉的onClick上点击，隐藏与类的所有元素'hidable'然后用THIS链接中的rel属性值的ID显示div。 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，那正是我需要的。在你的例子中，有一种方法可以在页面加载时隐藏所有div，然后选择点击哪个链接？