顯示，並具有

林這樣的問題隱藏菜單（其中只顯示一次一個），我有了一些隱藏的子內容的菜單。當用戶點擊導航按鈕時，會出現一些隱藏的內容。這部分是好的，所有的工作。顯示，並具有

我需要知道的是，當我有一個導航條顯示它的隱藏內容。如果用戶點擊下一個導航項。我希望其他隱藏的內容消失並顯示新的隱藏內容。

我的靈感來自這個網站。 http://www.o2.co.uk/如果您點擊導航箭頭項目。任何對此的幫助都會很大。順便說一下，所有的顯示和隱藏效果都起作用。

感謝任何人誰可以幫助..

來源

2010-11-11 Barry Corrigan

我假設你在JavaScript這樣做。如果我在這裏太小學了，請原諒我。

你的功能（如果你可以發佈它，那將是有益的），不僅需要改變你點擊的元素的顯示屬性，但也將其更改爲顯示：無;爲其他人。

因此，當您點擊導航條，你的JavaScript改變該列表的顯示屬性：塊或什麼，也改變了其他所有的名單顯示：無。這是一個有點暴力，所以你也可以改變其他目前的東西：none：無。

來源

2010-11-11 22:46:08 bikeboy389

你需要的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>

來源

2010-11-11 22:47:55 FatherStorm

喜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，然後選擇點擊哪個鏈接？

來源

2010-11-13 11:33:30

顯示，並具有

回答

相關問題