Jquery按鈕切換顯示隱藏div

Question

我在頁面上有這兩個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>

我正在使用這個javascript鏈接的onclick上。

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

Answer 1

在加載元素之前，您無法執行js方法。 所以將你的代碼包裝在head / body

檢查這個小提琴

Answer 2

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

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

另外需要注意的是， toggle_visibility會在其內部被覆蓋（僅一次）。 它可能看起來很奇怪，但它只是一種創建閉包的方法 ，以便在私有上下文中包含名為current的變量。 目標是避免污染父范圍。

最后，我修改了原始代碼以隱藏除id之外的所有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);
}

Answer 3

將您的代碼包裹在head或body 。

您在創建DOM之前執行代碼

小提琴演示

Answer 4

有幾個人評論了為什么它不適合小提琴。 回答這個問題....

如果只有兩個div，則可以使用jquery輕松切換可見性：

$(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