Вопросы Теги

Скрыть и показать с помощью чистого CSS [duplicate]

По вопросу «что мне делать с этим» может быть много ответов.

Более «формальный» способ предотвращения таких ошибок при разработке применяя дизайн по контракту в вашем коде. Это означает, что при разработке вы должны установить инварианты класса и / или даже предпосылки для функции и .

Короче говоря, инварианты класса гарантируют, что в вашем классе будут некоторые ограничения, которые не будут нарушены при нормальном использовании (и, следовательно, класс будет not получить в несогласованном состоянии). Предпосылки означают, что данные, данные как входные данные для функции / метода, должны соответствовать установленным ограничениям и никогда не нарушать их, а постулаты означают, что вывод функции / метода должен соответствовать установленным ограничениям снова не нарушая их. Условия контракта никогда не должны нарушаться во время выполнения программы без ошибок, поэтому дизайн по контракту проверяется на практике в режиме отладки, а отключен в выпусках , чтобы максимизировать развитую производительность системы.

Таким образом, вы можете избежать случаев NullReferenceException, которые являются результатом нарушения установленных ограничений. Например, если вы используете свойство объекта X в классе, а затем попытаетесь вызвать один из его методов, а X имеет нулевое значение, то это приведет к NullReferenceException: 

public X { get; set; }

public void InvokeX()
{
    X.DoSomething(); // if X value is null, you will get a NullReferenceException
}

Но если вы установите «свойство X никогда не должно иметь нулевого значения» в качестве предпосылки для метода, вы можете предотвратить описанный ранее сценарий: 

//Using code contracts:
[ContractInvariantMethod]
protected void ObjectInvariant () 
{
    Contract.Invariant ( X != null );
    //...
}

По этой причине Код Контракт существует для приложений .NET.

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

ОБНОВЛЕНИЕ: Стоит отметить, что этот термин был придуман Бертраном Майером в связи с его дизайном языка программирования Эйфеля .

29
задан brunn 16 May 2011 в 17:08
поделиться

9 ответов

У 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 */
-3
ответ дан Nick Brunt 26 August 2018 в 09:48
поделиться

Маленький хак-иш, но он работает. Обратите внимание, что тег 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 для переходов.

  • Тильда (~) означает некоторый родной брат после; (+ g).
  • [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>
3
ответ дан Aaron Schif 26 August 2018 в 09:48
поделиться

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

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

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

32
ответ дан apnerve 26 August 2018 в 09:48
поделиться

, если для вас работает «фокус» (т. е. оставаться видимым, когда элемент имеет фокус после щелчка), тогда см. этот существующий ответ SO:

Скрыть Показать список содержимого только с CSS, не используется javascript

0
ответ дан Community 26 August 2018 в 09:48
поделиться

Это может быть достигнуто путем присоединения «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>

Селектор + выберет ближайший элемент ПОСЛЕ раздела «кликер». Вы можете использовать другие селектора, но я считаю, что нет текущего способа выбора элемента, который не является родным или дочерним.

25
ответ дан James Fidlin 26 August 2018 в 09:48
поделиться

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

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}
2
ответ дан LinusGeffarth 26 August 2018 в 09:48
поделиться

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

0
ответ дан MRR0GERS 26 August 2018 в 09:48
поделиться

Хотя бит нестандартный , возможное решение состоит в том, чтобы содержать контент, который вы хотите показать / скрыть внутри <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>
7
ответ дан Naoise Golden 26 August 2018 в 09:48
поделиться 
    <div id="welcomeDiv"  style="display:none;" class="answer_list" > WELCOME</div>
    <input type="button" name="answer" value="Show Div" onclick="showDiv('welcomeDiv')" />

    <script>
    function showDiv(Div) {
    x=document.getElementById(Div);
        if(x.style.display=="none"){
       x.style.display = "block";

}

    else{
  document.getElementById(Div).style.display = "none";
  }
  }
</script>
0
ответ дан siyanda 26 August 2018 в 09:48
поделиться