Подтвердить что ты не робот

Показать/скрыть div на клик с помощью CSS

У меня есть меню и три скрытых div, которые отображаются в зависимости от того, какой вариант пользователь выбирает. Я хотел бы показать/скрыть их при нажатии, используя только CSS. У меня есть работа с jquery прямо сейчас, но я хочу, чтобы он был доступен с отключенным js. Кто-то здесь предоставил этот код для кого-то другого, но он работает только с div: hover или div: active, когда я меняю его на div: его посещают doesn Не работай. Мне нужно что-то добавить или, возможно, это не правильный способ сделать это? Я ценю любую помощь:)

Дело в том, что мой клиент хочет, чтобы эти отдельные divs скользят/исчезают, когда выбрано меню, но я все еще хочу, чтобы они отображались корректно с выключенным javascript. Может быть, z-index может сделать трюк...?

4b9b3361

ОТВЕТЫ

Ответ 1

В CSS нет обработчика событий onlclick. Вы должны использовать Javascript.

См. дополнительную информацию здесь о CSS-псевдоклассах: http://www.w3schools.com/css/css_pseudo_classes.asp

a:link {color:#FF0000;}    /* unvisited link - link is untouched */
a:visited {color:#00FF00;} /* visited link - user has already been to this page */
a:hover {color:#FF00FF;}   /* mouse over link - user is hovering over the link with the mouse or has selected it with the keyboard */
a:active {color:#0000FF;}  /* selected link - the user has clicked the link and the browser is loading the new page */

Ответ 2

Для решения только для CSS попробуйте использовать checkbox hack. В принципе, идея состоит в том, чтобы использовать флажок и назначать разные стили, исходя из того, установлен ли флажок или не используется псевдоселектор :checked. Флажок можно скрыть, если нужно, привязывая его к label.

ссылка на dabblet (не моя): http://dabblet.com/gist/1506530

ссылка на статью CSS Tricks: http://css-tricks.com/the-checkbox-hack/

Ответ 3

Это может быть достигнуто путем присоединения "tabindex" к элементу. Это сделает этот элемент "кликабельным". Затем вы можете использовать: focus, чтобы выбрать свой скрытый div следующим образом:

.clicker {
width:100px;
height:100px;
background-color:blue;
outline:none;
cursor:pointer;
}

.hiddendiv{
display:none;
height:200px;
background-color:green;
}

.clicker:focus + .hiddendiv{
display:block;
}
<html>
<head>
</head>
<body>

<div>
<div class="clicker" tabindex="1">Click me</div>
<div class="hiddendiv"></div>
</div>

</body>

</html>

Ответ 4

Хотя это немного нестандартно, возможно решение состоит в том, чтобы содержать контент, который вы хотите показать/скрыть внутри <a>, чтобы он мог быть доступен через CSS:

http://jsfiddle.net/Jdrdh/2/

a .hidden { visibility: hidden; }
a:visited .hidden { visibility: visible; }

<a href="#">A <span class="hidden">hidden content</span></a>

Ответ 5

Маленький хак-иш, но он работает. Обратите внимание, что тег label можно разместить где угодно. Ключевыми частями являются:

  • css input:checked+div сразу выбирает div рядом с/после ввода
  • На этикетке for указан флажок (или эй, оставьте метку и установите флажок)
  • display:none скрывает материал

код:

<head>
    <style>
        #sidebar {height:100%; background:blue; width:200px; clear:none; float:left;}
        #content {height:100%; background:green; width:400px; clear:none; float:left;}
        label {background:yellow;float:left;}
        input{display:none;}
        input:checked+#sidebar{display:none;}
    </style>
</head>
<body>
<div>
<label for="hider">Hide</label>
<input type="checkbox" id="hider">
<div id="sidebar">foo</div>

<div id="content">hello</div>

</div>
</body>

EDIT: Извините, возможно, лучше прочитал вопрос.

Можно также использовать элементы css3 для создания эффекта слайда/затухания. Я недостаточно знаком с ними, чтобы помочь вам в этом, но они существуют. Тем не менее, поддержка браузера.

Вы можете комбинировать вышеупомянутый эффект с javascript, чтобы использовать причудливые переходы и все еще иметь откат. jquery имеет метод css для переопределения вышеперечисленных и slide и fade для переходов.

  • Тильда (~) означает некоторого брата; не следующий брат, как плюс (+).
  • [key="value"] - это селектор атрибутов.
  • Радиокнопки должны иметь одно и то же имя

Чтобы соединить вкладки вместе, можно использовать:

<html>
<head>
<style>
input[value="1"]:checked ~ div[id="1"]{
display:none;
}
input[value="2"]:checked ~ div[id="2"]{
display:none;
}
</style>
</head>
<body>
<input type="radio" name="hider" value="1">
<input type="radio" name="hider" value="2">
<div id="1">div 1</div>
<div id="2">div 2</div>
</body>
</html>

Ответ 6

Вы можете сделать это с помощью селектора CSS3: target.

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}

Ответ 7

Вам понадобится либо использовать JS, либо написать функцию/метод на любом языке без разметки, который вы используете для этого. Например, вы могли бы написать что-то, что сохранит статус в файле cookie или сессии, а затем проверьте его на загрузке страницы. Если вы хотите сделать это без перезагрузки страницы, то JS станет вашим единственным вариантом.

Ответ 9

Вы можете найти <div> по id, посмотреть его свойство style.display и переключить его с none на block и наоборот.

function showDiv(Div) {
    var x = document.getElementById(Div);
    if(x.style.display=="none") {
        x.style.display = "block";
    } else {
        x.style.display = "none";
    }
}
<div id="welcomeDiv" style="display:none;" class="answer_list">WELCOME</div>
<input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />