Кнопка Jquery показывает, скрывает div

У меня есть эти два элемента 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 в данный момент по щелчку ссылки.

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


javascript jquery
person user3004208    schedule 17.12.2013    source источник
comment
Пожалуйста, взгляните на скрыть все элементы   -  person Anusha    schedule 17.12.2013

Ответы (4)


arrow_upward
1
arrow_downward

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

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

Следует также отметить, что toggle_visibility перезаписывается (только один раз) внутри себя. Это может выглядеть странно, но это всего лишь способ создать закрытие, чтобы заключить переменную с именем 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);
}
person leaf    schedule 17.12.2013
comment
Привет, спасибо за ответ, все работает. Я отмечу, когда смогу - person user3004208; 17.12.2013

arrow_upward
1
arrow_downward

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

проверьте эту скрипту

person Praveen    schedule 17.12.2013

arrow_upward
0
arrow_downward

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

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

Демонстрация скрипта

введите здесь описание изображения

person Tushar Gupta - curioustushar    schedule 17.12.2013

arrow_upward
0
arrow_downward

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

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

person Steve Clanton    schedule 17.12.2013