gpt4 book ai didi

jQuery onclick 显示/隐藏多个 div

转载 作者:太空狗 更新时间:2023-10-29 15:28:09 25 4
gpt4 key购买 nike

我正在尝试学习一些 jQuery,但显然我没有从上一个问题和得到的答案中学到任何东西,因为我无法弄清楚如何执行以下操作:

https://jsfiddle.net/9eofcw7w/

是的,它可以工作,但是像这样的代码很草率而且不专业:

$('#tab1').click(function () {
$('#tab2show').hide();
$('#tab3show').hide();
$('#tab4show').hide();
$('#tab5show').hide();

$('#tab1show').show();
});

我如何只使用几行 jQuery 而不是我现在拥有的东西来编写上述代码?

最佳答案

您的代码的问题是您为每个元素重复相同的代码块,相反您可以使用一些公共(public)属性来减少单独的处理程序,例如

首先,我们向所有选项卡元素添加一个公共(public)类,如 tab , 然后是另一个类 tab-content添加到所有内容元素,这将帮助我们轻松选择这些元素。

那么我们正在寻找的逻辑是,我们只需要显示 content其id与点击的标签相匹配(内容的id为<clicked tab id> + 'show')。

现在我们可以有一个单击处理程序,它将针对所有 tab元素,其中我们将其 id 与 'show' 连接起来通过.show()找到要显示的内容并显示然后我们隐藏所有其他 tab-content元素。

另请注意,我们可以为 tab-content 缓存 jQuery 对象以备后用。

var $contents = $('.tab-content');
$contents.slice(1).hide();
$('.tab').click(function() {
var $target = $('#' + this.id + 'show').show();
$contents.not($target).hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tab1" class="tab">Test 1</div>
<div id="tab2" class="tab">Test 2</div>
<div id="tab3" class="tab">Test 3</div>
<div id="tab4" class="tab">Test 4</div>
<div id="tab5" class="tab">Test 5</div>

<br />
<br />

<div id="tab1show" class="tab-content">
test 1 default = show
</div>

<div id="tab2show" class="tab-content">
test 2
</div>

<div id="tab3show" class="tab-content">
test 3
</div>

<div id="tab4show" class="tab-content">
test 4
</div>

<div id="tab5show" class="tab-content">
test 5
</div>

关于jQuery onclick 显示/隐藏多个 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31489542/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com