jquery button toggle show hide div

我在頁面上有兩個div，下面有兩個按鈕來分別控制隱藏和顯示它們。jquery button toggle show hide div

<div class="threeSixtyContainer"> 


    <div class="toggle360" style="display: block;" id="Blue">Im Blue</div> 
    <div class="toggle360" style="display: none;" id="Red">Im Red</div> 

    <ul class="flashlinks"> 

     <li id="" class="flashlinks"><a href="#Blue" onclick="toggle_visibility('Blue');">Blue</a></li> 
     <li id="" class="flashlinks"><a href="#Red" onclick="toggle_visibility('Red');">Red</a></li> 

    </ul> 

</div>

我現在在鏈接的onclick上使用此javascript。

function toggle_visibility(id) { 

    var e = document.getElementById(id); 

    console.log(e); 
    if(e.style.display == 'none') { 
     e.style.display = 'block'; 
    } else { 
     e.style.display = 'none'; 
    } 
}

它的工作原理但是我怎樣才能使它點擊一個按鈕將禁用另一個按鈕。所以單擊藍色將顯示藍色div並隱藏紅色div，然後禁用該按鈕並啓用另一個按鈕，這樣可以禁用相同的按鈕，但是反過來。

我已經提出了我在我的頁面上使用的代碼小提琴的工作，但在小提琴它不是？不知道爲什麼，無論如何發病。

編輯_小提琴現在工作。謝謝。

JSFIDDLE

來源

2013-12-17 user3004208

請看看[隱藏所有元素]（http://stackoverflow.com/questions/4644673/hide-all-elements-with-class-using-plain-javascript） – Anusha

這裏是一個可能的解決方案（沒有的jQuery）：http://jsfiddle.net/wared/A6w5e/。

正如您可能已經注意到的，鏈接不是「禁用」的，我只是保存當前顯示的DIV的ID，以便在切換前檢查請求的ID：if (current !== id)。

要注意的另一件事是toggle_visibility被覆蓋（只有一次）內部。它可能看起來很奇怪，但它只是一種創建closure的方法，以便將私有上下文中名爲current的變量括起來。目標是避免污染父範圍。

最後，我修改了原始代碼以隱藏除id定位的所有div之外的所有div。

function toggle_visibility(id) { 
    var current = 'Blue'; 
    (toggle_visibility = function (id) { 
     var div, l, i; 
     if (current !== id) { 
      current = id; 
      div = document.getElementsByClassName('toggle360'); 
      l = div.length; 
      i = 0; 
      for (; i < l; i++) { 
       div[i].style.display = div[i].id === id ? 'block' : 'none'; 
      } 
     } 
    })(id); 
}

來源

2013-12-17 11:03:38 leaf

嗨，感謝您的回覆，它完美的作品。當我可以時，我會標記 – user3004208

得到加載的元素之前，不能執行你的js方法。因此包裝你的代碼中head/body

檢查這個fiddle

來源

2013-12-17 10:34:54 Praveen

總結你的代碼head或body。

你執行你的代碼DOM之前，形成

Fiddle Demo

enter image description here

來源

2013-12-17 10:35:25

一些人已經評論了爲什麼它不能在小提琴中奏效。要回答這個問題....

它易於使用jquery切換可見如果只有兩個div：

$(document).delegate('.flashlinks a', 'click', function() { 
    $('.toggle360').toggle(); 
});

我會用CSS類禁用鏈接。然後，我會選擇做什麼用基於如果類是目前點擊做到：

$(document).delegate('.flashlinks a:not(".disabled")', 'click', function() { 
    $('.toggle360').toggle(); 
    $('.flashlinks a').toggleClass("disabled"); 
}); 

$(document).delegate('.flashlinks a.disabled', 'click', function() { 
    e.preventDefault(); 
});

，並在我的CSS我會像

.disabled { 
    color: black; 
    text-decoration:none; 
}

jsfiddle

來源

2013-12-17 11:11:12

jquery button toggle show hide div

回答

相關問題