[英]How to use jquery to create a “navigation” to hide and show content on the same page?
期望的情況 :從一開始就隱藏了所有測驗內容,並且我有一個帶li項的ul列表,作為我的“測驗問題導航”,應該一次顯示1個測驗問題(帶有btns廣播選項和div分別)當點擊“問題導航”時。
當前情況 :我正在考慮使用一個數組來檢查相同的attr名稱“ qns1”,但是我對JavaScript語法不熟悉
Java腳本
$(".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 -->
是的,將每個問題包裝在div
是必要的。 這可能是您正在尋找的效果,會因導航的click事件而在當前問題中逐漸消失並在新問題中逐漸消失。 API .delay()
用於簡化問題的轉換。
$(".btn").click(function(){
$('.qns').fadeOut();
$('#qns' + $(this).html()).delay(450).fadeIn();
});
參見示例JSFIDDLE
您應該首先將每個問題包裝在div
然后可以使用jQuery toggle()
根據問題導航的click事件顯示和隱藏問題。
$(".btn").click(function(){
$("#" + $(this).text()).toggle("fast");
});
在此處查看示例FIDDLE 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.