jquery div独立替换
我显示了 3 个（或更多，但这里是 3 个）蓝色 DIV，还有 3 个相同大小的红色 DIV 被隐藏。
我想要做的：当单击蓝色 div 时，该蓝色 div 被隐藏并被相应的红色 div 替换（每个红色 div 内容都会不同），并且如果尚未单击其他蓝色 div，则其他蓝色 div 保持蓝色。
然后当我们单击红色 div 时，它会隐藏并显示原始的蓝色 div。
我的 html/css
<style type="text/css">
body{width: 900px;}
#first, #second, #third{background: blue;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;}
#first-toggle, #second-toggle, #third-toggle {background: red;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;display: none;}
</style>
<div id="first">I'm an image</div>
<div id="second">I'm an image</div>
<div id="third">I'm an image</div>
<div id="first-toggle">I'm an content</div>
<div id="second-toggle">I'm a content</div>
<div id="third-toggle">I'm an content</div>
我提前感谢您未来的回答，或者即使您至少花时间阅读它；）
I have 3(or more but here 3) blue DIV displayed and there are 3 more same size red DIV wich are hidden.
What I want to do: when a blue div is clicked this blue div is hidden and replaced by the appropriate red div(each red div content is going to be different) and other blue div stay blue if these ones have not been clicked.
and then as we click on the red div it hides and display the original blue div back.
My html/css
<style type="text/css">
body{width: 900px;}
#first, #second, #third{background: blue;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;}
#first-toggle, #second-toggle, #third-toggle {background: red;float: left; margin-right: 100px; width: 200px;height: 200px;color: white;display: none;}
</style>
<div id="first">I'm an image</div>
<div id="second">I'm an image</div>
<div id="third">I'm an image</div>
<div id="first-toggle">I'm an content</div>
<div id="second-toggle">I'm a content</div>
<div id="third-toggle">I'm an content</div>
I thank you in advance for your future answers or even if you take the time to read it at least ;)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
您可以在您的情况下轻松使用replaceWith。
看看这个正在运行的jsFiddle，你就会明白了。
有关 ReplaceWith 的更多信息此处
You can easily use replaceWith in your case.
Check out this working jsFiddle and you'll understand.
More information on replaceWith here
这是解决方案的链接.. http://jsfiddle.net/ZyBkA/3/
希望这是你需要什么！
Here's a link the solution.. http://jsfiddle.net/ZyBkA/3/
hope this is what you require !
使用最简单的 html 标记查看这个出色的解决方案。
随意复制粘贴 div！
演示 1
或：
DEMO 2
...这是我的“只是为了好玩”的游戏
演示 3
DEMO 4 带有悬停内容：D
Look at this great solution using the most simple html markup.
Copy-paste divs at wish!
D E M O 1
or:
D E M O 2
...and here are my 'just for fun' playarounds
D E M O 3
D E M O 4 with a hover stuff :D
您可以使用 jquery 的 hide() 和 show()。此处的工作示例
http://jsfiddle.net/jpezK/4/
You can make use of jquery's hide() and show(). working example here
http://jsfiddle.net/jpezK/4/