div與jQuery之間的轉換

我有三個div s。我有一個主要的div，向用戶提供選擇查看其他兩個div的選項。它工作正常，如果我只使用文本，並不隱藏原始div。但是我想使用圖像映射並隱藏主div，如果用戶選擇他們可以單擊後退按鈕並讓div再次出現並且他們正在查看的那個淡出。我已經部分解決了這個問題，但需要幫助完成腳本，因此JS能夠正常工作，因爲JS並不是我的強項。下面是代碼：div與jQuery之間的轉換

// 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是否足夠。

謝謝！

來源

2012-08-16 L84

你可以發佈它使用的css嗎，將有助於創建一個測試環境。 – Jeemusu 2012-08-16 05:25:45

@Jeemusu - 99％的CSS只是頁面的樣式。我編輯了這個問題來反映這一點。 – L84 2012-08-16 05:34:59

你使用的是什麼版本的jQuery？ – 2012-08-16 05:43:29

認爲你想要一個back控制兩個div s到主div和一個選擇在主div的div選項。

Here是一個工作現場演示。

你可以在你的div中使用任何東西，而不僅僅是圖像。我有完全更改了您的JavaScript。評論你是否想要更多的幫助。

來源

2012-08-16 06:31:03

謝謝，我注意到一個問題，它出現後的div不會再消失。我不知道爲什麼會這樣。這也與@戴友凱的回答有關。 – L84 2012-08-16 06:36:40

小提琴鏈接的問題。再次檢查鏈接。我更新了。 – 2012-08-16 06:38:45

你也可以爲子div設置一個'overflow：hidden'。 – 2012-08-16 06:41:12

在標籤中，href="#xxx"應該是。

來源

2012-08-16 05:59:05 Barmar

破譯在http://jsfiddle.net/YzNcR/

我改變了href="#etc.."爲href="#"，並添加id="etc.." - 更常見的是使用的ID和類然後HREF中作爲選擇

增加反向鏈接到其他兩個div（與class="back"簡單的鏈接）

我重寫了JQuery，使其更加簡潔。簡單地說，如果點擊任何匹配且ID爲transformed-link或changed-link或一類back的ID，它將啓動點擊處理程序。

從那裏檢查，看看是什麼讓使用e.target.name（E是一個事件對象），點擊並根據被點擊它淡出和淡入。

如果你點擊transformed-link或changed-link它淡出nav-main然後淡入相應的div。

如果你點擊它back淡出當前元素的父（反向鏈接父是在這種情況下，家長格），然後在nav-main

希望這有助於變淡。

來源

2012-08-16 06:13:52 DaiYoukai

謝謝！我似乎有一個問題，但。當我點擊鏈接時，它會顯示畫廊。但是，當我點擊它不會隱藏原始div。我已經完全複製了你的代碼，不知道發生了什麼。在Firebug中觀看動作時，我可以看到'display：none;'沒有被添加回來，所以它仍然保持'block'。注意：主導航確實消失並正確回來，但只有其他兩個div沒有。 – L84 2012-08-16 06:32:50

嗯，你已經得到了你的正確答案，但我想我會回覆。我相信這個問題只是因爲其他div需要默認顯示：none;在他們。不知道你是否使用了CSS的那部分。 – DaiYoukai 2012-08-16 15:00:37

div與jQuery之間的轉換

回答

相關問題