JQuery button toggle show hide 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, затем отключит кнопку и включит другую кнопку, чтобы то же самое можно было отложить, но наоборот.

Я сделал скрипку с кодом, который я использую на своей странице, который работает, но на скрипке его нет? Не знаю, почему, плохой пост это так или иначе.

EDIT _ Fiddle Now Working. Благодарю.

JSFIDDLE

Answer 1

Вот возможное решение (не JQuery): http://jsfiddle.net/wared/A6w5e/.

Как вы могли заметить, ссылки не «отключены», я просто сохраняю идентификатор DIV, который в настоящее время отображается, чтобы проверить запрошенный идентификатор перед переключением: if (current !== id).

Следует отметить, что toggle_visibility перезаписан (только один раз) внутри себя. Это может показаться странным, но это всего лишь способ создать closure, чтобы заключить переменную с именем current в закрытый контекст. Цель состоит в том, чтобы не загрязнять родительскую область.

Наконец, я изменил исходный код, чтобы скрыть все div, кроме таргетинга, который указан id.

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 2

Вы не можете выполнить свой метод JS, прежде чем загружаются элементы. так обернуть код проверки head/body

это fiddle

Answer 3

Оберните свой код в head или body.

Вы выполняете свой код перед DOM создается

Fiddle Demo

Answer 4

Пара людей прокомментировала, почему это не работает в скрипке. Чтобы ответить на этот вопрос ....

Это легко переключать видимость с помощью 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