[英]on load and on click hide/show div
我想做的是在加載時隱藏除#p0以外的所有段落。 另外,如果用戶單擊同級跨度,我想顯示一個段落,並隱藏所有其他段落
<ul>
<li>
<h1>
<span id="span0">Lorem</span>
<p id="p0">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span1">Lorem2</span>
<p id="p1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span2">Lorem3</span>
<p id="p2">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
...
$('p:not("#p0")').hide(); $('span').on('click',function() { $('p').hide(); $(this).next('p').show(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li> <h1> <span id="span0">Lorem</span> <p id="p0">Lorem ipsum dolor sit amet,</p> </h1> </li> <li> <h1> <span id="span1">Lorem2</span> <p id="p1">Lorem ipsum dolor sit amet,</p> </h1> </li> <li> <h1> <span id="span2">Lorem3</span> <p id="p2">Lorem ipsum dolor sit amet,</p> </h1> </li> </ul>
如果您希望將其與頁面上其他p
/ span
分開,則可以使用'prefixed-by'屬性選擇器( ^=
) ...
$('p[id^="p"]:not("#p0")').hide(); $('span[id^="span"]').on('click',function() { $('p[id^="p"]').hide(); $(this).next('p[id^="p"]').show(); })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <ul> <li> <h1> <span id="span0">Lorem</span> <p id="p0">Lorem ipsum dolor sit amet,</p> </h1> </li> <li> <h1> <span id="span1">Lorem2</span> <p id="p1">Lorem ipsum dolor sit amet,</p> </h1> </li> <li> <h1> <span id="span2">Lorem3</span> <p id="p2">Lorem ipsum dolor sit amet,</p> </h1> </li> </ul>
$('#p0').hide();
$('span').on('click',function() {
$('p').hide();
$(this).next('p').show();
});
<ul>
<li>
<h1>
<span id="span0" class="spanclick">Lorem</span>
<p id="p0" class="par1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span1" class="spanclick">Lorem2</span>
<p id="p1" class="par1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<li>
<h1>
<span id="span2" class="spanclick">Lorem3</span>
<p id="p2" class="par1">Lorem ipsum dolor sit amet,</p>
</h1>
</li>
<script>
$(document).ready(function () {
$(".par1").hide();
$(".spanclick").click(function(){
$(".par1").toggle();
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.