如何使用jquery創建「導航」來在同一頁面上隱藏和顯示內容？

所期望的情況：所有的測驗內容都是從一開始就隱藏起來的，我有一個ul列表，裏面有li項目作爲我的「測驗問題導航」，應該顯示1個測驗問題（包括無線電btns選擇和DIV RESP）在當時間「被點擊問題導航如何使用jquery創建「導航」來在同一頁面上隱藏和顯示內容？

現狀：我想有一個數組來檢查同一ATTR名‘qns1’，但我不熟悉JavaScript語法

Javascript

$(".span9").hide();

HTML

<ul class="quiznav"> 
    <li>Q1</li><br> 
    <li>Q2</li><br> 
    <li>Q3</li><br> 
</ul> 

<div class="span9"> 

     <div class="qnstitle" name="qns1">Q1. Lorem ipsum dolor sit amet</div> 
     <label class="radio"> 
      <input name="qns1" class="radioBtn" type="radio" value="A">a) asdf 
     </label> 
     <div class="resp" data-qns="qns1"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet ligula mi. Aenean eu magna quam. In ultrices nisi non tellus molestie ut mattis turpis convallis. </p> 
     </div> 

     <label class="radio"> 
      <input name="qns1" class="radioBtn" type="radio" value="B">b) bsdf 
     </label> 
     <div class="resp" data-qns="qns1"> 
      <p>Proin porta, ante eu feugiat facilisis, nulla erat porta dui, sed pellentesque orci sapien quis libero. Nam nec nibh metus, nec luctus massa.</p> 
     </div> 

     <label class="radio"> 
      <input name="qns1" class="radioBtn" type="radio" value="C">c) csdf 
     </label> 
     <div class="resp" data-qns="qns1"> 
      <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem. Fusce ut metus a dui egestas congue quis quis augue. Suspendisse sed nunc sed nulla volutpat pharetra at vel purus.</p> 
     </div> 

     <br> 

     <div class="qnstitle" name="qns2">Q2. Nunc sed aliquet enim.</div> 
     <label class="radio"> 
      <input name="qns2" class="radioBtn" type="radio" value="A">a) azzzddsaf 
     </label> 
     <div class="resp" data-qns="qns2"> 
      <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p> 
     </div> 

     <label class="radio"> 
      <input name="qns2" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf 
     </label> 
     <div class="resp" data-qns="qns2"> 
      <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p> 
     </div> 

     <label class="radio"> 
      <input name="qns2" class="radioBtn" type="radio" value="C">c) czzdfasdf 
     </label> 
     <div class="resp" data-qns="qns2"> 
      <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p> 
     </div> 

<div class="qnstitle" name="qns3">Q3. Nunc sed aliquet enim.</div> 
     <label class="radio"> 
      <input name="qns3" class="radioBtn" type="radio" value="A">a) azzzddsaf 
     </label> 
     <div class="resp" data-qns="qns3"> 
      <p>Donec metus nibh, pharetra vitae semper id, blandit non lorem.</p> 
     </div> 

     <label class="radio"> 
      <input name="qns3" class="radioBtn" type="radio" value="B">b) bzzzzddafdsf 
     </label> 
     <div class="resp" data-qns="qns3"> 
      <p>Aenean eu metus id dui tristique aliquam. Pellentesque non scelerisque nisi. Integer a nibh orci</p> 
     </div> 

     <label class="radio"> 
      <input name="qns3" class="radioBtn" type="radio" value="C">c) czzdfasdf 
     </label> 
     <div class="resp" data-qns="qns3"> 
      <p>Pellentesque turpis libero, consectetur nec dictum eu, accumsan a sapien. Integer eget ultrices risus. Pellentesque vel orci purus.</p> 
     </div> 
    </div><!-- end of span9 -->

來源

2012-12-07 Teo Jing Yuan

是的，要包裝每個問題在div是必要的。這可能是您正在尋找的效果，基於導航的點擊事件淡出當前並淡出新問題。 API .delay()用於緩解問題的轉換。

$(".btn").click(function(){  
    $('.qns').fadeOut(); 
    $('#qns' + $(this).html()).delay(450).fadeIn(); 
});

見例如這裏JSFIDDLE

來源

2012-12-07 11:49:37 Xuanhao

你應該先換你在div每個問題，那麼你可以使用jQuery toggle()顯示和隱藏基於問題的導航點擊事件的問題。

$(".btn").click(function(){ 
    $("#" + $(this).text()).toggle("fast"); 
});

見例如這裏FIDDLE。

來源

2012-12-07 10:37:19 SubRed

你的方法適用於顯示層出不窮1個問題。我希望達到的目的是爲了顯示1個問題，而其他問題每次點擊不同的問題導航時都會隱藏。 –

如何使用jquery創建「導航」來在同一頁面上隱藏和顯示內容？

回答

相關問題