jquery怎样实现点击按钮切换div
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery怎样实现点击按钮切换div相关的知识，希望对你有一定的参考价值。
就是页面的下一步和上一步 要怎么实现这个效果 点击下一步是另一个div 求详细的讲解 最好给个演示。。。
参考技术A <div id="a1" class="someclass">1</div><div id="a2" class="someclass">2</div>
<script>
$('.someclass').click(function ()
$('.someclass').hide();
$(this).show();
);
</script>
不知道你是不是要这样本回答被提问者和网友采纳 参考技术B 通过jquery控制div的显示和隐藏就可以了啊追问
关键是怎么通过点击按钮来控制呢？
怎样用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 文档中出现一次
以上是关于jquery怎样实现点击按钮切换div的主要内容，如果未能解决你的问题，请参考以下文章
JQuery移动动画实现点击按钮切换图片--JQuery基础