怎样用jquery控制div的显示与隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样用jquery控制div的显示与隐藏相关的知识，希望对你有一定的参考价值。
<div id="tab"><input/></div>
<div id="tab"><input/></div>
<div id="tab"><input/></div>
就是有三个div 里面都有一个按钮 怎样实现点击第一个div的按钮出现第二个div 隐藏第一个和第三个 点击第二个div的按钮出现第三个div 隐藏第一个和第二个div
divs.each(function(i)
var $this=$(this);
$this.children("input").click(function()
if(i==0)
divs.eq(0).hide();
divs.eq(2).hide();
divs.eq(1).show();
else if(i==1)
divs.eq(0).hide();
divs.eq(1).hide();
divs.eq(2).show();
else .....//依此类推
);
);
大概是这样，至于如何优化，就看你的了。。
参考技术A <!DOCTYPE html><html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="白菜编辑部">
<title>白菜编辑部</title>
<style type="text/css">
</style>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$ (function ()
$ ('div#tab :button').click (function ()
$(this).closest('div#tab').next('div').show().siblings('div').hide();
)
)
</script>
</head>
<body>
<div id="tab">
<input type="button" value="test1" />
</div>
<div id="tab">
<input type="button" value="test2" />
</div>
<div id="tab">
<input type="button" value="test3" />
</div>
</body>
</html>追问
没用昂
追答这个是例子，你看下，有没有效果
$(this).removeClass('check_on').addClass('check_on').siblings().removeClass('check_on');
);
你不能用id，用class可以
id 属性只能在每个 HTML 文档中出现一次
怎么用js显示隐藏div
参考技术A怎么用js来显示或隐藏一个div？很简单，下面一起来看一下。
- 01
首先我们创建一个div，和一个按钮。用按钮的点击来控制div的显示或隐藏。
02添加一个样式名叫hide的样式，主要是设置display=none，即隐藏。
03接着用js来实现显示，隐藏的功能。我们用Jquery的hasClass方法来判断div是否有hide样式，有则删除这个样式，即显示div。如果没有，则添加一个hide的样式，即隐藏div。
04运行页面，我们点击按钮，如果div是正在显示的，点击后就会隐藏，如果是隐藏状态的，点击后就会显示。
以上是关于怎样用jquery控制div的显示与隐藏的主要内容，如果未能解决你的问题，请参考以下文章