使用jQuery在div之间转换

时间:2012-08-16 05:16:22

标签: javascript jquery css html

我有三个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

<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,变换航空,变换航空只是JS的标识符,没有分配给它们的代码。 * /

.hide{ display:none; }

我的问题归结为:

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

随意修改或完全重写原始脚本。但请提供示例I had help with this script,并且不知道足够的JS自己编写它。

谢谢!

3 个答案:

答案 0 :(得分:2)

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

希望这有帮助。

答案 1 :(得分:2)

您认为需要back控制主div的两个div和主div中的选择div选项。

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

您可以在div中使用任何内容,而不仅仅是图片。我已经完全更改了您的JavaScript。如果您需要更多帮助,请发表评论。

答案 2 :(得分:0)

在代码中,href="#xxx"应为id="xxx"