Question

在学校我们还剩5分钟左右，所以我决定随机教程继续学习W3Schools。并找到CSS标签教程。它类似于：

span {display: none;}
span:active {display: block;}

基本上，当点击<a href="#menu1">时，它会显示：阻止它在href含义中的元素，菜单1将会显示。它的制作方式是某种程度上你可以轻松地添加新的#id，添加新的#id然后将div添加到该ID，在CSS中不需要更改任何内容。 CSS中大约有10-20行。谁知道？我非常需要它。没有涉及JavaScript，或JQuery或类似的东西。

Answer 1

我不确定我是否理解你的问题，但这听起来对我来说是目标技术。使用CSS3，可以使用:target参数。有了它，你可以添加一个css状态，当他们通过锚选择。

这是一个非常简单的例子，背后的诀窍是什么。

#contents div {
    border: 1px black dotted;
    display: none; //hides all div elements
}

#contents div:target {
    display: block; //shows the selected div (target)
}

<div id="tabs">
    <div id="menu">
        <a href="#content1">Menu 1</a>
        <a href="#content2">Menu 2</a>
        <a href="#content3">Menu 3</a>
        <a href="#content4">Menu 4</a>
    </div>
    <div id="contents">
        <div id="content1">Suspendisse potenti. Mauris in lacinia.</div>
        <div id="content2">Pellentesque pulvinar venenatis ante in.</div>
        <div id="content3">Vestibulum a nisi viverra, hendrerit.</div>
        <div id="content4">Nullam leo ipsum, euismod sed.</div>
    </div>
</div>

Answer 2

没有javascript就无法做到这一点。 Active是一个伪类，意味着它表示元素的状态。该状态最初需要设置，或者您必须添加active类，这将再次需要添加和删除javascript。也许，你的老师没有与你讨论javascript部分，但这里有一个链接，可以告诉你如何做你想要的。 http://www.w3schools.com/w3css/w3css_tabulators.asp

编辑：好吧，我确实发现这个js小提琴https://jsfiddle.net/eu81273/812ehkyf/显然只是css。他实际上正在使用输入字段并使用可以在html中初始设置的“已检查”状态。所以检查一下

Answer 3

这里你得到了href：#img1 active view

＆＃13;

html,body {
  font-family: 'Raleway', sans-serif;
  padding: 0 2em;
  font-size: 18px;
  background: #222;
  color: #aaa;
  text-align:center;
}

h1 {
  font-size: 3em;
  font-weight: 200;
  margin: 0.5em 0 0.2em 0;
}

p {
  margin: 1.5em 0;
  color: #888;
}

.italic { font-style: italic; }
.small { font-size: 0.8em; }

/** LIGHTBOX MARKUP **/

.lightbox {
	/** Default lightbox to hidden */
	display: none;

	/** Position and style */
	position: fixed;
	z-index: 999;
	width: 100%;
	height: 100%;
	text-align: center;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
}

.lightbox img {
	/** Pad the lightbox image */
	max-width: 90%;
	max-height: 80%;
	margin-top: 2%;
}

.lightbox:target {
	/** Remove default browser outline */
	outline: none;

	/** Unhide lightbox **/
	display: block;
}

＆＃13;

<!-- Lightbox usage markup -->
<link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" />
<h1>Pure CSS Lightbox</h1>
<p>Click the thumbnail below to activate the lightbox</p>

<!-- thumbnail image wrapped in a link -->
<a href="#img1">
  <img src="https://c3.staticflickr.com/8/7315/28008413826_696528d68c.jpg " height="100" width="100" >
</a>

<!-- lightbox container hidden with CSS -->
<a href="#_" class="lightbox" id="img1">
  <img src="https://c3.staticflickr.com/8/7315/28008413826_696528d68c.jpg">
</a>

<p class="italic small">Image credit: Me</p>

＆＃13;

live demo

使用href的CSS选项卡

3 个答案: