用jquery显示一个块,同时隐藏其他块.当点击部分中的每个块时,会出现第二个块、第三个块,然后是第四个块
Show one block while hiding other blocks with jquery when clicking on each one in part appears second block, third and then fourth
我想制作一个4个块的导航菜单,而我已经显示了一个块,然后点击打开第二个块,从第二个开始你选择并再次点击出现第三个块,第四个块也是如此。。。这是我的代码,如果能工作会很高兴,但它不是…:(请提供帮助和建议。谢谢您可以在下面或下一个链接中查看代码: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");
})
});
});
});
相关文章:
- Angular:如何使用ng选项进行四个单独的选择
- 有人知道如何使用highchart API实现三个或四个级别的动态下拉图吗
- 获取两个输入元素的值,并检查第三个元素的值.将值设置为第四个元素
- 如何在图像上添加标签.在jquerymobile中图像的四个角落
- 如何在javascript中生成任意四个数字之间的随机数
- 根据下拉选择隐藏四个输入框
- 调整窗口大小时,页面上的四个图像将不会调整大小
- 如何将制表符替换为四个空格 jQuery
- 如何使图形上最近的四个点发光
- Angularjs:显示字符串中的最后四个字符,并将其余字符替换为“X”
- 从四个输入字段中查找总计或平均值,并在另一个输入字段中显示值
- 如何将字符串修剪到最后四个字符
- 包括四个.js文件,但只加载了一个??为什么
- 插入四个空格而不是制表符
- 使用正则表达式替换除最后四个数字之外的所有数字
- 删除第四个空格之后的字符串的所有字符
- 如何使用 jquery 选择器获取第三个或第四个元素并设置其 id
- 用jquery显示一个块,同时隐藏其他块.当点击部分中的每个块时,会出现第二个块、第三个块,然后是第四个块
- 用Javascript查找每月的第二个和第四个星期二
- 在显示四个序列的高图表柱图中的第二个和第三个序列之间添加间隙