Javascript 在div和x27之间转换；使用jQuery

我有三个

div

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

JS

))

HTML

我的问题归结为：

如何淡出原始div，并使其淡入用户选择的div中。然后使用链接允许用户返回主div（从而淡出当前div并淡入主div或原始div）

请随意修改或完全重写原始脚本。但请提供例子，因为我不知道足够的JS来自己写

谢谢

在标签中，

href=“#xxx”

应该是

id=“xxx”

在标签中，

href=“#xxx”

应该是

id=“xxx”

重新编码的

我将

href=“#etc…”

更改为

href=“#”

，并添加了

id=“etc…”

——更常用的是使用id和类，然后使用href作为选择器

向其他两个div添加了一个反向链接（带有

class=“back”

的简单链接）

我重写了JQuery，使其更加简洁。简单地说，如果单击了与

转换链接

或

更改链接

或一类

返回

匹配的任何内容和id，则会触发单击处理程序

从那里，它使用

e.target.name

（e是一个事件对象）检查单击的内容，并根据单击的内容淡出淡入

如果您正在单击

transformed link

或

changed link

它将淡出

nav main

，然后在相应的div中淡出

如果单击

back

，则会淡出当前元素父级（在本例中，反向链接父级是父级div），然后淡入

nav main

希望这有帮助。

重新编码

我将

href=“#etc…”

更改为

href=“#”

，并添加了

id=“etc…”

——更常用的是使用id和类，然后使用href作为选择器

向其他两个div添加了一个反向链接（带有

class=“back”

的简单链接）

我重写了JQuery，使其更加简洁。简单地说，如果单击了与

转换链接

或

更改链接

或一类

返回

匹配的任何内容和id，则会触发单击处理程序

从那里，它使用

e.target.name

（e是一个事件对象）检查单击的内容，并根据单击的内容淡出淡入

如果您正在单击

transformed link

或

changed link

它将淡出

nav main

，然后在相应的div中淡出

如果单击

back

，则会淡出当前元素父级（在本例中，反向链接父级是父级div），然后淡入

nav main

---

希望这有帮助。

我想您需要一个

返回

控件，用于将两个

div

s切换到main

div

，并在main div中选择一个div选项

是一个工作现场演示

---

您可以使用

div

s中的任何内容，而不仅仅是图像。我已经彻底改变了你的JavaScript。如果您需要更多帮助，请进行注释。

认为您需要一个

返回
控件，用于两个
div
s到main
div
，并在main div中选择一个div选项

是一个工作现场演示

您可以使用
div
s中的任何内容，而不仅仅是图像。我已经彻底改变了你的JavaScript。如果您需要更多帮助，请发表评论。
您是否可以发布它正在使用的css，这将有助于创建测试环境。@Jeemusu-99%的css只是为页面设计样式。我编辑了这个问题以反映这一点。您使用的是什么版本的jQuery？我还对您的javascript进行了更改，因为它不正确。在这里找到：@adammerifield-我正在使用jQuery的1.7.2。你改变了什么，你能指出它吗？谢谢你能发布它使用的css吗？这将有助于创建一个测试环境。@Jeemusu-99%的css只是页面的样式。我编辑了这个问题以反映这一点。您使用的是什么版本的jQuery？我还对您的javascript进行了更改，因为它不正确。在这里找到：@adammerifield-我正在使用jQuery的1.7.2。你改变了什么，你能指出它吗？谢谢谢谢但我似乎有一个问题。当我点击链接时，它会显示图库。但是，当我单击“上一步”时，它不会隐藏原始div。我已经准确地复制了您的代码，但不确定发生了什么。当观看Firebug中的动作时，我可以看到
显示：无未被添加回，因此它将保持
块
。注意：主导航确实消失并正确返回，只有另外两个导航没有。好吧，你已经得到了正确的答案，但我还是会回答的。我认为问题只是因为其他div默认需要显示：没有；在他们身上。不确定你是否使用了CSS的这一部分。谢谢！但我似乎有一个问题。当我点击链接时，它会显示图库。但是，当我单击“上一步”时，它不会隐藏原始div。我已经准确地复制了您的代码，但不确定发生了什么。当观看Firebug中的动作时，我可以看到
显示：无未被添加回，因此它将保持
块
。注意：主导航确实消失并正确返回，只有另外两个导航没有。好吧，你已经得到了正确的答案，但我还是会回答的。我相信
// 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 ');

    }
}    

<div id="nav-main">
<!-- This is the original main div that users will choose which div to show. -->
<img src="nav-main.jpg" width="940" height="400" usemap="#Map" border="0" />
<map name="Map" id="Map">
  <area shape="rect" coords="52,146,420,258" href="#transformed-link" class="inactive" />
  <area shape="rect" coords="536,145,876,267" href="#changed-link" class="inactive"  />
</map>
</div>

<div id="transformed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

<div id="changed-aviation" class="hide">
<!-- CONTENT OF DIV -->
Link to return to main div? 
</div>

.hide{ display:none; }