私は 3 つdivの s を持っています。他の 2 つの 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 を知らないので、例を提供してください。
ありがとう！