jQuery显示隐藏替换区域 [英] jquery show hide replace area
本文介绍了jQuery显示隐藏替换区域的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我如何使用jQuery显示/隐藏相同的div区域...本质上是换出内容?
how can i use jQuery to show/hide the same div area... essentially swapping out content?
这是我到目前为止的内容,我无法弄清楚如何隐藏以前的内容并将其替换为新的内容:
here is what i have so far, and i cant figure out how to hide the previous content and replace it with the new content:
<script type="text/javascript">
$(document).ready(function(){
$('.content').hide();
$('a').click(function(){
$('.content').show('slow');
});
//then hide previous content
});
</script>
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
推荐答案
如果将内容包装在div中,则这样会容易一些,如下所示:
If you wrap the contents in a div, this would be a bit easier, like this:
<div id="wrap">
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
</div>
这是jQuery中的
$('a').click(function(){
$("#wrap > div").hide(); //hide previous
$('.content').show('slow'); //show what's clicked on
});
由于您的ID具有约定,因此可以使用它,或者给您链接一个类,或者也包装它们,如下所示:
Since you have a convention with your IDs though, you can use that, either give you links a class, or wrap them as well, like this:
<div id="links">
<a href="#" id="a-link">A</a>
<a href="#" id="b-link">B</a>
</div>
<div id="wrap">
<div class="start-content" id="a">
content here
</div>
<div class="content" id="b">
content here
</div>
</div>
然后,您可以对所有链接使用单个事件处理程序,如下所示:
Then you could use a single event handler for all your links like this:
$('#wap > div:not(.start-content)').hide(); //Initial hide
$("#links a").click(function() {
$("#wrap > div").hide(); //hide previous
var id = $(this).attr("id").replace('-link', ''); //matching id
$('#' + id).show('slow'); //show what's clicked on
});
这篇关于jQuery显示隐藏替换区域的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文