gpt4 book ai didi

javascript - 当单击部分中的每个 block 时,显示一个 block ,同时使用 jquery 隐藏其他 block 出现第二个 block ,第三个和第四个

转载 作者:行者123 更新时间:2023-11-28 18:14:31 26 4
gpt4 key购买 nike

我想制作一个 4 block 导航菜单,虽然我已经显示了一个 block ,然后单击打开第二个 block ,从第二个开始选择并再次单击出现第三个 block ,第四个 block 相同...这是我的代码,如果可行,我会很高兴,但它不是...... :(请帮忙,提出建议。谢谢!您可以在下面或下一个链接中查看代码:http://jsfiddle.net/9afaF/

<div class="games_content">

<script>
$(function() {
$("#block_2 div,#block_3 div,#block_4 div").hide();

$("#block_1 div").click(function(){
$("#block_2 div,#block_3 div,#block_4 div").hide();
$("#block_2 div."+$(this).attr('id')).show("fast");

$("#block_2 div").click(function(){
$("#block_3 div,#block_4 div").hide();
$("#block_3 div."+$(this).attr('id')).show("fast");

$("#block_3 div").click(function(){
$("#block_4 div").hide();
$("#block_4 div."+$(this).attr('id')).show("fast");
})
});
});
});
</script>
<div style="float:left;width:237px;height:420px;background: rgba(255, 0, 0, .5);margin-right:15px;" id="block_1">
<div id="category1">Category 1</div>
<div id="category2">Category 2</div>
<div id="category3">Category 3</div>
<div id="category4">Category 4</div>
<div id="category5">Category 5</div>
</div>

<div style="float:left;width:164px;height:500px;background: rgba(255, 0, 0, .5);margin-right:2px;margin-top:10px;margin-left:4px;" id="block_2">
<div class="category1" id="subcat1">Sub Category 1</div>
<div class="category1" id="subcat2">Sub Category 2</div>
<div class="category1" id="subcat3">Sub Category 3</div>
<div class="category2" id="subcat4">Sub Category 4</div>
<div class="category2" id="subcat5">Sub Category 5</div>
<div class="category3" id="subcat6">Sub Category 6</div>
<div class="category3" id="subcat7">Sub Category 7</div>
<div class="category4" id="subcat8">Sub Category 8</div>
<div class="category4" id="subcat9">Sub Category 9</div>
<div class="category5" id="subcat10">Sub Category 10</div>
<div class="category5" id="subcat11">Sub Category 11</div>
</div>

<div style="float:left;width:160px;height:500px;background: rgba(255, 0, 0, .5);margin-right:2px;margin-top:10px;" id="block_3">
<div class="subcat1" id="game1">Sub Sub Categoey 1</div>
<div class="subcat1" id="game2">Sub Sub Categoey 2</div>
<div class="subcat2" id="game3">Sub Sub Categoey 3</div>
<div class="subcat2" id="game4">Sub Sub Categoey 4</div>
<div class="subcat3" id="game5">Sub Sub Categoey 5</div>
<div class="subcat4" id="game6">Sub Sub Categoey 6</div>
</div>

<div style="float:left;width:240px;height:400px;background: rgba(255, 0, 0, .5);margin-left:17px;" id="block_4">
<div class="game1">Game1</div>
<div class="game2">Game2</div>
<div class="game3">Game3</div>
<div class="game4">Game4</div>
</div>

最佳答案

您没有将 jquery 库加载到您的 fiddle 中。

在这里查看它的工作情况 FIDDLE

$(function() {
$("#block_2 div,#block_3 div,#block_4 div").hide();

$("#block_1 div").click(function(){
$("#block_2 div,#block_3 div,#block_4 div").hide();
$("#block_2 div."+$(this).attr('id')).show("fast");

$("#block_2 div").click(function(){
$("#block_3 div,#block_4 div").hide();
$("#block_3 div."+$(this).attr('id')).show("fast");

$("#block_3 div").click(function(){
$("#block_4 div").hide();
$("#block_4 div."+$(this).attr('id')).show("fast");
})
});
});
});

关于javascript - 当单击部分中的每个 block 时,显示一个 block ,同时使用 jquery 隐藏其他 block 出现第二个 block ,第三个和第四个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18097500/

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