使用jQuery在div之间转换

我有三个div 。 我有一个主div,向用户提供选择查看其他两个div的选项。 如果我只使用文本并且不隐藏原始div,它可以正常工作。 但我想使用图像映射并让主div隐藏然后如果用户选择他们可以单击后退按钮并重新显示div并且他们正在查看的那个淡出。 我有部分工作但需要帮助完成脚本,所以它工作正常,因为JS不是我的强项。 这是代码:

JS

 // I am using jQuery Version 1.7.2 var $j = jQuery.noConflict(); //Script for Choosing which form to display $j("#transformed-link, #changed-link").live('click', function(){ //figure out what button was clicked. if(this.id === "transformed-link"){ var btnA = $j(this); var btnB = $j("#changed-link"); var divA = $j('#transformed-aviation'); var divB = $j('#changed-aviation'); } else{ btnA = $j(this); btnB = $j("#transformed-link"); divA = $j('#changed-aviation'); divB = $j('#transformed-aviation'); } //make sure it is not already active, no use to show/hide when it is already set if(btnA.hasClass('active')){ return; } //see if div is visible, if so hide, than show first div if(divB.is(":visible")){ divB.fadeOut("slow", function(){ divA.fadeIn("slow"); }); } else{//if already hidden, just show the first div divA.fadeIn("slow"); //Add and remove classes to the buttons to switch state btnA.addClass('active').removeClass('inactive '); btnB.removeClass('active').addClass('inactive '); } } 

);

HTML

  
Link to return to main div?
Link to return to main div?

CSS

/ *大多数CSS只是特定于页面的。 nav-main,transformation-aviation,changed-aviation只是JS的标识符,没有分配给它们的代码。 * /

 .hide{ display:none; } 

我的问题归结为:

你如何淡出原始的div并让它淡出用户选择的那个。 然后使用链接允许用户返回主div(从而淡出当前div并在主要或原始div中淡入)。

随意修改或完全重写原始脚本。 但请提供示例,因为我对此脚本有帮助,并且不了解足够的JS来自己编写它。

谢谢!

你想要一个back控制两个div到主div和一个div div的选择div选项。

是一个有效的现场演示。

您可以在div使用ANYTHING而不仅仅是图像。 我完全改变了你的JavaScript。 如果您想要更多帮助,请评论。

记录在http://jsfiddle.net/YzNcR/

我将href="#etc.."更改为href="#"并添加了id="etc.." – 更常见的是使用id和类然后hrefs作为选择器

添加了其他两个div的反向链接(带有class="back"简单链接)

我重写了JQuery,更简洁一些。 简单地说,如果点击了任何匹配和transformed-linkchanged-linkback类的ID,它就会设置点击处理程序。

从那里它检查使用e.target.name (e是一个事件对象)点击了什么,并根据点击的内容淡出并淡入。

如果你点击transformed-linkchanged-link它会淡出nav-main然后在适当的div中淡出。

如果你被点击back它会淡出当前元素parent(在这种情况下后面链接parent是父div)然后在nav-main淡出

希望这可以帮助。

在标签中, href="#xxx"应为id="xxx"