单击并更改div的内容时激活CSS按钮。

Question

我想要的结果是有一个菜单css按钮，点击它更改div的内容 ...当然我设法做到了... 那么这就是问题所在： 每当我点击第二个或第三个按钮/链接时，它都会设置更改div内容，但当您开始点击任意位置时，< strong>更改回默认内容 ... 即使单击页面中的任何位置，我也希望同时显示按钮/链接和div内容。 我想在纯CSS 中实现这一目标。我知道有一个代码，虽然我没有那么好，以实现它。任何人都可以帮我解决这个问题吗？

这是我的HTML代码看起来像

＆＃13;

＆＃13;

<div id="mynavtabcontent">

		<a id="video" tabindex="1">Video</a>
		<a id="apps" tabindex="2">Apps</a>
		<a id="music" tabindex="3">Music</a>

	<div id="content">
		<div id="def">Video Content here</div>
		<div id="videocontent">Video Content here</div>
		<div id="appscontent">Apps Content here</div>
		<div id="musiccontent">Music Content here</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是我的CSS代码

#def id是默认内容， #videocontent是默认内容的镜像，每当我想返回视频div内容时

＆＃13;

＆＃13;

#mynavtabcontent{
	font-family: Verdana;
	font-size: 18px;
}
#mynavtabcontent a{
	text-decoration: none;
	padding: 7 7 7 7px;
	background-color: yellow;
	color: #222;
}
#mynavtabcontent a:hover{
	background-color: #333;
	color: white;
	cursor: pointer;
}
#content{
	border:1px dashed black;
	background-color: pink;
	height: 400px;
	width: 200px;
	margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
	display: none;
}
#video1:focus~#content div:nth-child(1),
#video:focus~#content div:nth-child(2),
#apps:focus~#content div:nth-child(3),
#music:focus~#content div:nth-child(4){
	display: block;
	
}
#video1:focus~#content #def,
#video:focus~#content #def,
#apps:focus~#content #def,
#music:focus~#content #def{
	display:none;
}

＆＃13;

＆＃13;

＆＃13;

结果如下

运行代码段单击第二个或第三个按钮，然后单击内容中的任意位置。要查看我的意思关于使其处于活动状态，以便在您点击任何地方时都不会返回默认状态。

＆＃13;

＆＃13;

#mynavtabcontent{
	font-family: Verdana;
	font-size: 18px;
}
#mynavtabcontent a{
	text-decoration: none;
	padding: 7 7 7 7px;
	background-color: yellow;
	color: #222;
}
#mynavtabcontent a:hover{
	background-color: #333;
	color: white;
	cursor: pointer;
}
#content{
	border:1px dashed black;
	background-color: pink;
	height: 400px;
	width: 200px;
	margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
	display: none;
}
#video1:focus~#content div:nth-child(1),
#video:focus~#content div:nth-child(2),
#apps:focus~#content div:nth-child(3),
#music:focus~#content div:nth-child(4){
	display: block;
	
}
#video1:focus~#content #def,
#video:focus~#content #def,
#apps:focus~#content #def,
#music:focus~#content #def{
	display:none;
}

＆＃13;

<div id="mynavtabcontent">

		<a id="video" tabindex="1">Video</a>
		<a id="apps" tabindex="2">Apps</a>
		<a id="music" tabindex="3">Music</a>

	<div id="content">
		<div id="def">Video Content here</div>
		<div id="videocontent">Video Content here</div>
		<div id="appscontent">Apps Content here</div>
		<div id="musiccontent">Music Content here</div>
	</div>
</div>

＆＃13;

＆＃13;

＆＃13; 如果CSS没有其他办法... 任何人都可以为我提供javascipt代码吗？ 这真的对我有所帮助！ -edited。

Answer 1

就行动而言，你可以为CSS做些什么。 CSS只是造型。

您需要使用一些javascript来处理操作。

Javascript与DOM交互以在浏览器中更改语法。

但是，您可以使用CSS属性（如transition，transform，：hover，：active，：focus和@key-frames）对动画进行有限的控制。

Answer 2

点击其他地方后，您的链接就会失去焦点。你需要使用能够保存状态的东西 - ：checked伪元素是一个完美的选择。您可以使用标签隐藏输入并管理状态。以下是应用了更改的代码：

<div id="mynavtabcontent">

  <input type="radio" name="content-toggle" id="video"> <label for="video" tabindex="1">Video</label>
  <input type="radio" name="content-toggle" id="apps"> <label for="apps" tabindex="2">Apps</label>
  <input type="radio" name="content-toggle" id="music"> <label for="music" tabindex="3">Music</label>

  <div id="content">
    <div id="def">Video Content here</div>
    <div id="videocontent">Video Content here</div>
    <div id="appscontent">Apps Content here</div>
    <div id="musiccontent">Music Content here</div>
  </div>

</div>

和css：

#mynavtabcontent input {
  display: none;
}

#mynavtabcontent{
  font-family: Verdana;
  font-size: 18px;
}
#mynavtabcontent label{
  text-decoration: none;
  padding: 7 7 7 7px;
  background-color: yellow;
  color: #222;
}
#mynavtabcontent label:hover{
  background-color: #333;
  color: white;
  cursor: pointer;
}
#content{
  border:1px dashed black;
  background-color: pink;
  height: 400px;
  width: 200px;
  margin-top: 50px;
}
#videocontent, #appscontent, #musiccontent{
  display: none;
}
#video1:checked~#content div:nth-child(1),
#video:checked~#content div:nth-child(2),
#apps:checked~#content div:nth-child(3),
#music:checked~#content div:nth-child(4){
  display: block;

}
#video1:checked~#content #def,
#video:checked~#content #def,
#apps:checked~#content #def,
#music:checked~#content #def{
  display:none;
}

http://codepen.io/MakiBM/pen/KgXzma