在没有href的div上使用目标 [英] Using target on div without a href
问题描述
我创建了一个ID为"dashboard"的行div，其中我有3个div.在此行下方，我创建了3行，每行各有一个div.我想单击ID为"dashboard"的行div中的一个div，然后打开ID为"alarm"的行div.我想使用target来完成此任务，但是不幸的是target只能与href标记一起使用.这是我的代码
I have created a row div with id"dashboard" in which i have 3 divs. And below this row i have created 3 rows with one div in each row. I want to click on one div in row div with id"dashboard" and open the row div with id "alarm". I want to use target to acheive this task but unfortunately target can only be used with a href tag. Here is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css">
<title>My Dashboard</title>
</head>
<body>
<div id="dashboard" class="row" >
<div class="col-4" style="background-color:#009">
</div>
<div class="col-4" style="background-color:#C00">
</div>
<div class="col-4" style="background-color:#0C0">
</div>
</div>
<div id="alarm" class="row" >
<div class="col-12" style="background-color:#009">
</div>
</div>
<div id="calendar" class="row" >
<div class="col-12" style="background-color:C00">
</div>
</div>
<div id="weather" class="row" >
<div class="col-12" style="background-color:#0C0">
</div>
</div>
</body>
</html>
这是它的css代码:
@charset "utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
.show{
display: none;
}
.show:target{
display: block;
}
推荐答案
如本 JSFiddle ，这是仅CSS的解决方案，只需将您的 div 替换为 a ，并使用:目标它将按照您想要的方式工作:
As in this JS Fiddle, this is a CSS only solution, just replace your div's with a's and making use of the :target it will work the way you want:
@charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
}
:target {
display: block;
}<div id="dashboard" class="row">
<a href="#alarm" class="col-4" style="background-color:#009"></a>
<a href="#calendar" class="col-4" style="background-color:#C00"></a>
<a href="#weather" class="col-4" style="background-color:#0C0"></a>
</div>
<div id="alarm" class="row show">
<div class="col-12" style="background-color:#009"></div>
</div>
<div id="calendar" class="row show">
<div class="col-12" style="background-color:#C00"></div>
</div>
<div id="weather" class="row show">
<div class="col-12" style="background-color:#0C0"></div>
</div> 更新:应评论中的请求，现在在每个中添加一个< a href =#dashboard"> .显示小工具并执行相同的:target 技巧，我们得到的结果 JS Fiddle 2 :
Update: Upon a request in the comment, now with adding an <a href="#dashboard"> in each one of the .show gadgets and performing the same :target trick we have this result JS Fiddle 2:
@charset"utf-8";
/* CSS Document */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.row:after {
content: "";
clear: both;
display: block;
}
[class*="col-"] {
float: left;
padding: 15px;
}
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
.show {
display: none;
position: absolute;
width: 100%;
height: 400px;
top: 0;
}
:target {
display: block;
}
.back-btn {
width: 60px;
height: 40px;
display: inline-block;
z-index: 20;
background-color: orange;
position: absolute;
padding-top: 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: black;
}<div id="dashboard" class="row">
<a href="#alarm" class="col-4" style="background-color:#009"></a>
<a href="#calendar" class="col-4" style="background-color:#C00"></a>
<a href="#weather" class="col-4" style="background-color:#0C0"></a>
</div>
<div id="alarm" class="alarm row show">
<a href="#dashboard" class="back-btn">back</a>
<div class="col-12" style="background-color:#009; height:300px;"></div>
</div>
<div id="calendar" class="row show">
<a href="#dashboard" class="back-btn">back</a>
<div class="col-12" style="background-color:#C00; height:300px;"></div>
</div>
<div id="weather" class="row show">
<a href="#dashboard" class="back-btn">back</a>
<div class="col-12" style="background-color:#0C0; height:300px;"></div>
</div> ** 注意，我已经在 .show DIVs 的内联样式中添加了 height:300px; .
** NOTE that I've added height:300px; to the inline style of the .show DIVs.
这篇关于在没有href的div上使用目标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
