使用jQuery在div之间转换 [英] Transitioning between div's with jQuery

问题描述

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

I have three divs. I have a main div that presents the user an option of choosing to view the two other divs. It works okay if I use just text and do not hide the original div. But I want to use an image map and have the main div hide then if the user chooses they can click a back button and have the div re-appear and the one they are viewing fade out. I have it partly worked out but need help finishing the script so it works properly as JS is not my strong suit. Here is the code:

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

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

/ * CSS的大多数只是特定于页面的。 nav-main，变换航空，变换航空只是JS的标识符，没有分配给它们的代码。 * /

/* Majority of the CSS is only page specific. nav-main, transformed-aviation, changed-aviation are just identifiers for JS and have no code assigned to them. */

.hide{ display:none; }

我的问题归结为：

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

How do you fade out the original div and have it fade in the one that the user choose. Then with a link allows an user to go back to the main div (thus fading out the current div and fading in the main or original div).

随意修改或完全重写原始脚本。但请提供示例我对此脚本有帮助并且不提供知道足够的JS自己写。

Feel free to modify or completely rewrite the original script. But please provide examples as I had help with this script and do not know enough JS to write it by myself.

谢谢！

推荐答案

认为你想要返回控制两个 div s到主 div 和一个选择div选项in主要部分。

Think you want a back control for two divs to main div and a select div option in main div.

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

Here is a working Live Demo.

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

You can use ANYTHING in your divs and not just images. I have completely changed your JavaScript. Comment if you want any more help.

这篇关于使用jQuery在div之间转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！