个人中心
gpt4 book ai didi

html - 在没有 href 的情况下在 div 上使用目标

转载 作者：太空宇宙 更新时间：2023-11-04 15:01:22 25 4
gpt4 key购买 nike

我创建了一个 ID 为“dashboard”的行 div，其中有 3 个 div。在这一行下方，我创建了 3 行，每行有一个 div。我想单击 ID 为“dashboard”的行 div 中的一个 div，然后打开 ID 为“alarm”的行 div。我想使用 target 来完成这个任务，但不幸的是 target 只能与 href 标签一起使用。这是我的代码

  <!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;
    }

最佳答案

如本 JS Fiddle ，这是一个纯 CSS 解决方案，只需替换你的 div与a的并利用 :target它会按照你想要的方式工作:

   @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">在每一个 .show小工具和执行相同的操作:target技巧我们有这个结果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>

** 请注意，我添加了 height:300px;到 .show 的内联样式DIV。

关于html - 在没有 href 的情况下在 div 上使用目标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33766865/

25 4 0
文章推荐： c++ - 这个内存分配分配在哪里？
文章推荐： html - Zing 图表堆积图
文章推荐： java - 从 shell 脚本调用 .jar
文章推荐： c++ - 如何在映射中存储缓冲区的值而不是其引用？
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com