2

我有三个divs。我有一个主 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

<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>

CSS

/* 大多数 CSS 仅针对特定页面。nav-main、transformed-aviation、changed-aviation 只是 JS 的标识符，没有分配给它们的代码。*/

.hide{ display:none; }

我的问题归结为：

你如何淡出原始 div 并让它淡入用户选择的那个。然后通过链接允许用户返回主 div（从而淡出当前 div 并淡入主或原始 div）。

随意修改或完全重写原始脚本。但是请提供示例，因为我对这个脚本有帮助，并且不知道足够的 JS 来自己编写它。

谢谢！

4

3 回答 3

2

在http://jsfiddle.net/YzNcR/重新编码

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

添加了指向其他两个 div 的反向链接（简单链接class="back"）

我重写了 JQuery，使其更加简洁。简单地说，如果点击了任何匹配和 idtransformed-link或changed-linkor 的类，back它就会触发点击处理程序。

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

如果您单击transformed-link或changed-link它淡出nav-main然后淡入适当的 div。

如果你被点击back，它会淡出当前元素的父元素（在这种情况下，反向链接父元素是父 div）然后淡入nav-main

希望这可以帮助。

于 2012-08-16T06:13:52.160 回答
2

认为您想要一个back控制两个divs 到 maindiv和一个主 div 中的选择 div 选项。

这是一个有效的现场演示。

您可以在您div的 s 中使用任何东西，而不仅仅是图像。我已经完全改变了你的 JavaScript。如果您需要更多帮助，请发表评论。

于 2012-08-16T06:31:03.407 回答
0

在标签中，href="#xxx"应该是id="xxx".

于 2012-08-16T05:59:05.047 回答