使用CSS单击显示/隐藏div

时间：2022-11-28 20:39:00

I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn't work. Would I need to add something or perhaps this isn't the right way to do it? I appreciate any help :)

我有一个菜单和三个隐藏的div，根据用户选择的选项显示。我想用CSS在点击时显示/隐藏它们。我现在已经让它与jquery一起工作了，但是我想让它在禁用js的情况下是可访问的。这里有人为其他人提供了这段代码，但它只适用于div:hover或div:当我将它更改为div时，它是活动的:访问它不起作用。我是否需要添加一些东西，或者这不是正确的方法?我很感激你的帮助

The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick...?

问题是，我的客户希望在菜单被选中时，这个div会滑动/淡出，但我仍然希望在javascript被关闭的情况下，它们能够正确显示。

9 个解决方案

#1

-2  

CSS does not have an onlclick event handler. You have to use Javascript.

CSS没有onlclick事件处理程序。你必须使用Javascript。

See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp

有关CSS伪类的更多信息，请参见:http://www.w3schools.com/css/css_pseudo_class.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

29  

For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.

对于只有css的解决方案，请尝试使用复选框hack。基本上，我们的想法是使用一个复选框，并根据复选框是否被选中来分配不同的样式。如果需要的话，可以通过将复选框附加到标签上来隐藏它。

link to dabblet (not mine): http://dabblet.com/gist/1506530

链接到dabblet(不是我的):http://dabblet.com/gist/1506530

link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/

链接到CSS技巧文章:http://css-魔术师s.com/the-checkbox hack/

#3

24  

This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...

这可以通过将“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>

The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.

+ selector将在“clicker”div之后选择最近的元素。您可以使用其他选择器，但我认为目前没有选择非兄弟或子元素的方法。

#4

7  

Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:

虽然有点不标准，但一种可能的解决方案是在中包含您想要显示/隐藏的内容，以便通过CSS可以访问它:

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

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

3  

A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:

有点庸俗，但很管用。注意标签标签可以放在任何地方。关键部分:

  • The css input:checked+div selects the div immediately next to/after the input
  • css输入:勾选+div在输入之后选择div
  • The label for said checkbox (or hey leave out the label and just have the checkbox)
  • 复选框的标签(或者，嘿，把标签去掉，只剩下复选框)
  • display:none hides stuff
  • 显示:没有隐藏的东西

Code:

代码:

<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: Sorry could have read the question better.

One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.

也可以使用css3元素来创建幻灯片/渐变效果。我对他们还不太熟悉，对这方面的帮助不大，但他们确实存在。浏览器支持是不确定的。

You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.

您可以将上述效果与javascript结合起来，使用花哨的转换，但仍然会有倒退。jquery有一个css方法来覆盖上面的内容，并滑动和淡出转换。

  • Tilda(~) mean some sibling after; not next sibling like plus(+).
  • Tilda(~)是指后面的某个兄弟姐妹;不是下一个像+(+)这样的兄弟姐妹。
  • [key="value"] is an attribute selector.
  • [key="value"]是一个属性选择器。
  • Radio buttons must have same name
  • 单选按钮必须有相同的名字

To string tabs together one could use:

将标签串在一起可以使用:

<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

1  

You could do this with the CSS3 :target selector.

您可以使用CSS3:目标选择器来实现这一点。

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}

#7

0  

You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.

您将不得不使用JS或者用任何非标记语言编写函数/方法来实现这一点。例如，您可以编写一些东西，将状态保存到cookie或会话变量，然后在页面加载时检查它。如果你想在不重载页面的情况下做到这一点，那么JS将是你唯一的选择。

#8

0  

if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:

如果“focus”对您有效(例如，保持可见，而元素在单击后具有焦点)，那么请查看现有的内容，因此回答:

Hide Show content-list with only CSS, no javascript used

只使用CSS隐藏显示内容列表，不使用javascript

#9

0  

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

#1

-2  

CSS does not have an onlclick event handler. You have to use Javascript.

CSS没有onlclick事件处理程序。你必须使用Javascript。

See more info here on CSS Pseudo-classes: http://www.w3schools.com/css/css_pseudo_classes.asp

有关CSS伪类的更多信息，请参见:http://www.w3schools.com/css/css_pseudo_class.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

29  

For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label.

对于只有css的解决方案，请尝试使用复选框hack。基本上，我们的想法是使用一个复选框，并根据复选框是否被选中来分配不同的样式。如果需要的话，可以通过将复选框附加到标签上来隐藏它。

link to dabblet (not mine): http://dabblet.com/gist/1506530

链接到dabblet(不是我的):http://dabblet.com/gist/1506530

link to CSS Tricks article: http://css-tricks.com/the-checkbox-hack/

链接到CSS技巧文章:http://css-魔术师s.com/the-checkbox hack/

#3

24  

This can be achieved by attaching a "tabindex" to an element. This will make that element "clickable". You can then use :focus to select your hidden div as follows...

这可以通过将“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>

The + selector will select the nearest element AFTER the "clicker" div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.

+ selector将在“clicker”div之后选择最近的元素。您可以使用其他选择器，但我认为目前没有选择非兄弟或子元素的方法。

#4

7  

Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the <a> so it can be reachable through CSS:

虽然有点不标准，但一种可能的解决方案是在中包含您想要显示/隐藏的内容，以便通过CSS可以访问它:

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

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

3  

A little hack-ish but it works. Note that the label tag can be placed any where. The key parts are:

有点庸俗，但很管用。注意标签标签可以放在任何地方。关键部分:

  • The css input:checked+div selects the div immediately next to/after the input
  • css输入:勾选+div在输入之后选择div
  • The label for said checkbox (or hey leave out the label and just have the checkbox)
  • 复选框的标签(或者，嘿，把标签去掉，只剩下复选框)
  • display:none hides stuff
  • 显示:没有隐藏的东西

Code:

代码:

<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: Sorry could have read the question better.

One could also use css3 elements to create the slide/fade effect. I am not familiar enough with them to be much help with that aspect but they do exist. Browser support is iffy though.

也可以使用css3元素来创建幻灯片/渐变效果。我对他们还不太熟悉，对这方面的帮助不大，但他们确实存在。浏览器支持是不确定的。

You could combine the above effect with javascript to use fancy transitions and still have a fall back. jquery has a css method to override the above and slide and fade for transitions.

您可以将上述效果与javascript结合起来，使用花哨的转换，但仍然会有倒退。jquery有一个css方法来覆盖上面的内容，并滑动和淡出转换。

  • Tilda(~) mean some sibling after; not next sibling like plus(+).
  • Tilda(~)是指后面的某个兄弟姐妹;不是下一个像+(+)这样的兄弟姐妹。
  • [key="value"] is an attribute selector.
  • [key="value"]是一个属性选择器。
  • Radio buttons must have same name
  • 单选按钮必须有相同的名字

To string tabs together one could use:

将标签串在一起可以使用:

<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

1  

You could do this with the CSS3 :target selector.

您可以使用CSS3:目标选择器来实现这一点。

menu:hover block {
    visibility: visible;
}

block:target {
    visibility:hidden;
}

#7

0  

You're going to have to either use JS or write a function/method in whatever non-markup language you're using to do this. For instance you could write something that will save the status to a cookie or session variable then check for it on page load. If you want to do it without reloading the page then JS is going to be your only option.

您将不得不使用JS或者用任何非标记语言编写函数/方法来实现这一点。例如，您可以编写一些东西，将状态保存到cookie或会话变量，然后在页面加载时检查它。如果你想在不重载页面的情况下做到这一点，那么JS将是你唯一的选择。

#8

0  

if 'focus' works for you (i.e. stay visible while element has focus after click) then see this existing SO answer:

如果“focus”对您有效(例如，保持可见，而元素在单击后具有焦点)，那么请查看现有的内容，因此回答:

Hide Show content-list with only CSS, no javascript used

只使用CSS隐藏显示内容列表，不使用javascript

#9

0  

    <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>
标签：

相关文章