登录
当前位置： 首页 > 知识库问答 >
问题：

为什么我必须在更新DOM之前单击事件处理程序目标两次？

姚星河
2023-03-14

我正在制作一个时间跟踪仪表板网站，它有3个链接（每日，每周和每月），我想根据点击的链接更改内容。我将所有3个链接的哈希值设置为#每日，#每周和#每月，在我的jQuery脚本中，我通过添加使用的条件来隐藏和显示divlocation.hash属性隐藏和显示特定。脚本有点工作，但内容只有当我双击链接时才会改变，我不知道我的脚本出了什么问题。我做了一个存储库，还为它启用了GitHub页面，GitHub存储库和GitHub页面链接。

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow() {
  if (location.hash === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (location.hash === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (location.hash === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i++) {
  frequency[i].addEventListener('click', function(_event) {
    hideAndShow(this);
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box+.rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="user rounded-box">
    <div class="user__frequency box-padding">
      <h3><a href="#daily" class="user__frequency__link" id="user__frequency__daily" class="box-padding">Daily</a></h3>
      <h3><a href="#weekly" class="user__frequency__link" id="user__frequency__weekly" class="box-padding">Weekly</a></h3>
      <h3><a href="#monthly" class="user__frequency__link" id="user__frequency__monthly" class="box-padding">Monthly</a></h3>
    </div>
  </div>

  <div class="work rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="work__daily" class="daily">
          <div class="current">5hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" class="weekly">
          <div class="current">32hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" class="monthly">
          <div class="current">103hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="play rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="play__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" class="weekly">
          <div class="current">10hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" class="monthly">
          <div class="current">23hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="study rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="study__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" class="monthly">
          <div class="current">13hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="exercise rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="exercise__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" class="monthly">
          <div class="current">11hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="social rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="social__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" class="weekly">
          <div class="current">5hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" class="monthly">
          <div class="current">21hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="self-care rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Self Care</h2>
        <a href=""><img class="" src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="self-care__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" class="weekly">
          <div class="current">2hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" class="monthly">
          <div class="current">7hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>

共有3个答案

顾单弓
2023-03-14

位置。哈希在执行单击处理程序后更新
利用此作为单击的锚元素（

我们需要DOM中的“原始”值，因此需要使用。getAttribute（“href”）

function hideAndShow(clickedAnchor) {
    const target = clickedAnchor.getAttribute("href");

    if (target === "#daily") {
      // ...
    } else if (target === "#weekly") {
      // ...
    } else if (target === "#monthly") {
      // ...
    }
}

工作示例

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow(clickedAnchor) {
  const target = clickedAnchor.getAttribute("href");
  
  if (target === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (target === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (target === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');
for (let i = 0; i < frequency.length; i++) {
  frequency[i].addEventListener('click', function(_event) {
    hideAndShow(this);
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box+.rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="user rounded-box">
    <div class="user__frequency box-padding">
      <h3><a href="#daily" class="user__frequency__link" id="user__frequency__daily" class="box-padding">Daily</a></h3>
      <h3><a href="#weekly" class="user__frequency__link" id="user__frequency__weekly" class="box-padding">Weekly</a></h3>
      <h3><a href="#monthly" class="user__frequency__link" id="user__frequency__monthly" class="box-padding">Monthly</a></h3>
    </div>
  </div>

  <div class="work rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="work__daily" class="daily">
          <div class="current">5hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" class="weekly">
          <div class="current">32hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" class="monthly">
          <div class="current">103hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="play rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="play__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" class="weekly">
          <div class="current">10hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" class="monthly">
          <div class="current">23hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="study rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="study__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" class="monthly">
          <div class="current">13hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="exercise rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="exercise__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" class="monthly">
          <div class="current">11hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="social rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="social__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" class="weekly">
          <div class="current">5hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" class="monthly">
          <div class="current">21hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="self-care rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Self Care</h2>
        <a href=""><img class="" src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="self-care__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" class="weekly">
          <div class="current">2hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" class="monthly">
          <div class="current">7hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>

慕阳
2023-03-14

更新位置之前，单击处理程序正在运行。解决这一问题的一种快速方法是将函数调用包装为零延迟超时，这将迫使它进入下一个执行周期。

详细了解其他可能的解决方案。

let daily = document.getElementsByClassName('daily');
let weekly = document.getElementsByClassName('weekly');
let monthly = document.getElementsByClassName('monthly');

window.onload = function() {
  $(weekly).hide();
  $(monthly).hide();
};

function hideAndShow() {
  if (location.hash === '#daily') {
    $(daily).show();
    $(weekly).hide();
    $(monthly).hide();
  } else if (location.hash === '#weekly') {
    $(daily).hide();
    $(weekly).show();;
    $(monthly).hide();
  } else if (location.hash === '#monthly') {
    $(daily).hide();
    $(weekly).hide();
    $(monthly).show();
  }
};

let frequency = document.querySelectorAll('.user__frequency__link');

for (let i = 0; i < frequency.length; i++) {
  frequency[i].addEventListener('click', function(_event) {
    setTimeout(function() {
      hideAndShow(this);
    }); // no delay for you!
  });
}
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
*,
*::after,
*::before {
  box-sizing: border-box;
}

:root {
  --clr-neutral: hsl(0, 100%, 100%);
  --clr-primary-100: hsl(236, 100%, 87%);
  --clr-primary-200: hsl(235, 45%, 61%);
  --clr-primary-300: hsl(246, 80%, 60%);
  --clr-primary-400: hsl(235, 46%, 20%);
  --clr-primary-500: hsl(226, 43%, 10%);
  --clr-work: hsl(15, 100%, 70%);
  --clr-play: hsl(195, 74%, 62%);
  --clr-study: hsl(348, 100%, 68%);
  --clr-exercise: hsl(145, 58%, 55%);
  --clr-social: hsl(264, 64%, 52%);
  --clr-self-care: hsl(43, 84%, 65%);
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: var(--clr-primary-500);
  color: var(--clr-neutral);
}

h1 {
  margin: 0;
}

a {
  text-decoration: none;
  color: var(--clr-neutral);
}

.bg-primary-400 {
  background-color: var(--clr-primary-400);
  margin-top: 2.8rem;
  border-radius: 1.25rem 1.25rem 0 0;
}

.user__frequency__link {
  font-size: 22px;
  font-weight: 400;
  opacity: .5;
}

.user__frequency__link:visited,
.user__frequency__link:focus,
.user__frequency__link:hover,
.user__frequency__link:active {
  opacity: 1;
}

.container {
  margin: 5rem 1rem;
}

.rounded-box {
  border-radius: 1.5rem;
  overflow: hidden;
}

.rounded-box+.rounded-box {
  margin-top: 1.6rem;
}

.box-padding {
  padding: 1rem 2rem;
}

.box-padding1 {
  padding: 3.4rem 2rem;
}

.box-padding2 {
  padding: 1rem 2rem 2rem 2rem;
}

.user__name {
  background-color: var(--clr-primary-300);
  border-radius: 0 0 1.25rem 1.25rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: center;
}

.user__img {
  border: 2px solid var(--clr-neutral);
  border-radius: 50%;
  width: 125px;
  height: 125px;
}

.user__frequency {
  display: flex;
  justify-content: space-around;
}

.user {
  background-color: var(--clr-primary-400);
}

.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.heading-neutral {
  font-size: 1.125rem;
  font-weight: 500;
  margin-bottom: 0.846rem;
}

.ellipsis {
  color: var(--clr-neutral);
}

.work {
  background-color: var(--clr-work);
  background-image: url(../images/icon-work.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.play {
  background-color: var(--clr-play);
  background-image: url(../images/icon-play.svg);
  background-repeat: no-repeat;
  background-position: 95% -2%;
}

.study {
  background-color: var(--clr-study);
  background-image: url(../images/icon-study.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.exercise {
  background-color: var(--clr-exercise);
  background-image: url(../images/icon-exercise.svg);
  background-repeat: no-repeat;
  background-position: 95% 0%;
}

.social {
  background-color: var(--clr-social);
  background-image: url(../images/icon-social.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.self-care {
  background-color: var(--clr-self-care);
  background-image: url(../images/icon-self-care.svg);
  background-repeat: no-repeat;
  background-position: 95% -7%;
}

.daily,
.weekly,
.monthly {
  display: flex;
  flex-grow: 1;
  align-items: center;
}

.current {
  font-size: 2rem;
  font-weight: 300;
}

.previous {
  margin-left: auto;
  opacity: 0.6;
}


/* .weekly,
.monthly {
   display: none;
} */

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="user rounded-box">
    <div class="user__frequency box-padding">
      <h3><a href="#daily" class="user__frequency__link" id="user__frequency__daily" class="box-padding">Daily</a></h3>
      <h3><a href="#weekly" class="user__frequency__link" id="user__frequency__weekly" class="box-padding">Weekly</a></h3>
      <h3><a href="#monthly" class="user__frequency__link" id="user__frequency__monthly" class="box-padding">Monthly</a></h3>
    </div>
  </div>

  <div class="work rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Work</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="work__daily" class="daily">
          <div class="current">5hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 7hrs</div>
          <!-- daily -->
        </div>
        <div id="work__weekly" class="weekly">
          <div class="current">32hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 36hrs</div>
          <!-- weekly -->
        </div>
        <div id="work__monthly" class="monthly">
          <div class="current">103hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 128hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="play rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Play</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="play__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 2hrs</div>
          <!-- daily -->
        </div>
        <div id="play__weekly" class="weekly">
          <div class="current">10hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 8hrs</div>
          <!-- weekly -->
        </div>
        <div id="play__monthly" class="monthly">
          <div class="current">23hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 29hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="study rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Study</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="study__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="study__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 7hrs</div>
          <!-- weekly -->
        </div>
        <div id="study__monthly" class="monthly">
          <div class="current">13hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 19hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="exercise rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Exercise</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="exercise__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="exercise__weekly" class="weekly">
          <div class="current">4hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 5hrs</div>
          <!-- weekly -->
        </div>
        <div id="exercise__monthly" class="monthly">
          <div class="current">11hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 18hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="social rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Social</h2>
        <a href=""><img src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="social__daily" class="daily">
          <div class="current">1hr</div>
          <!-- daily -->
          <div class="previous">Yesterday - 3hrs</div>
          <!-- daily -->
        </div>
        <div id="social__weekly" class="weekly">
          <div class="current">5hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 10hrs</div>
          <!-- weekly -->
        </div>
        <div id="social__monthly" class="monthly">
          <div class="current">21hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 23hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>

  <div class="self-care rounded-box">
    <div class="bg-primary-400 box-padding2">
      <div class="row">
        <h2 class="heading-neutral">Self Care</h2>
        <a href=""><img class="" src="./images/icon-ellipsis.svg" alt=""></a>
      </div>
      <div class="row">
        <div id="self-care__daily" class="daily">
          <div class="current">0hrs</div>
          <!-- daily -->
          <div class="previous">Yesterday - 1hr</div>
          <!-- daily -->
        </div>
        <div id="self-care__weekly" class="weekly">
          <div class="current">2hrs</div>
          <!-- weekly -->
          <div class="previous">Last Week - 2hrs</div>
          <!-- weekly -->
        </div>
        <div id="self-care__monthly" class="monthly">
          <div class="current">7hrs</div>
          <!-- monthly -->
          <div class="previous">Last Month - 11hrs</div>
          <!-- monthly -->
        </div>
      </div>
    </div>
  </div>
</div>

<div class="attribution">
  Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>. Coded by <a href="#">Your Name Here</a>.
</div>
巴英韶
2023-03-14

问题其实只是一个比赛条件基本上。。。在通过单击a更新位置哈希之前，您会检查它。但是，这真的是您想要做的吗？根据散列值更改显示，用户单击？难道你不应该只听散列的变化，并采取相应的行动吗？

window.addEventListener("hashchange", hideAndShow);

每次哈希更改时，hideAndShow将触发并执行所需的更改...这样，您就不必记住在每次点击更改哈希值时添加X或Y事件。

 类似资料：
  • 我必须点击两次，为什么？说明：JavaScript onhtml事件处理程序

    这是一个非常基本的例子，我有两个部分-左边和右边-左边有五个图像，右边是空的，我有复制按钮复制整个左节点（div）并将其追加到右div，删除按钮应该删除右div中的最后一个图像，它确实如此，事情是i必须点击两次删除按钮删除一个图像，所以我必须点击10次删除整个设置。我应该怎么做，使删除按钮删除图像只需单击一次？ 这是我的全部代码，在MicrosoftEdge和GoogleChrome上进行了测试，

  • 如何为连续两次鼠标单击放置两个事件处理程序？

    我想把两个事件处理程序两个连续点击像国际象棋，我已经这样做了，它的工作...但我希望在单独的事件处理程序中完成。

  • 为什么在标记单击事件上重新渲染贴图？

    我有谷歌地图与集群的多个标记。在标记点击时，我显示信息窗口，但是当我点击标记时，整个地图标记和集群都被重新渲染，这使得页面缓慢而烦人。 以下是我的代码： 参考：https://tomchentw.github.io/react-google-maps/#markerclusterer

  • 为什么我必须三次点击这个链接？

    我正在设计一个网站，在导航我有2个链接有下拉菜单（“关于”和“服务”）。当你将鼠标悬停在链接上时，下拉菜单就会出现，然后当你点击链接时，下拉菜单就会消失，然后如果你再点击它，下拉菜单就会再次出现。所以基本上，为了进入那个页面，你必须三次点击链接。有没有人知道我可以做什么来改变这个，这样你就可以在点击一次后进入页面？ 这是导航在我的HTML代码中的样子： 以下是相关的CSS： 编辑：我发现下拉菜单是

  • 为什么在线程销毁之前必须调用join（）或detach（）？

    我不明白为什么当一个被破坏时，它必须处于连接（）或分离（）状态。 连接等待线程完成，而分离不会。似乎有一些我不理解的中间状态。因为我的理解是连接和分离是互补的：如果我不调用连接（），那么分离（）是默认的。 逻辑上的detach（）应该是线程的默认行为，因为这是线程的定义，它们是并行执行的，与其他线程无关。 那么，当线程对象被破坏时，为什么要调用terminate（）呢？为什么标准不能简单地将线程视

  • 什么是gtag，为什么我必须从谷歌标签管理器中单独添加？

    我发现谷歌标签管理器（GTM）周围的谷歌留档在帮助我弄清楚哪些比特去哪里方面很糟糕。 据我所知，GTM要求你把一个

相关问答

为什么在线程销毁之前必须调用join（）或detach（）？什么是gtag，为什么我必须从谷歌标签管理器中单独添加？Maven-为什么在“mvn清理”之后，我需要在“mvn包”之前执行“Maven更新项目”？为什么RecyclerView项目只在单击两次后更改背景色？Kafka流程序正在重新处理已处理的事件

相关文章

为什么我的程序上“必须被抓住或声明要扔”？为什么Java Bean必须可序列化？将点击事件处理程序添加到iframe什么时候必须更改serialVersionUID？为什么子进程必须使用“ wait（）”？

相关阅读

GWT 事件处理AWT 事件处理Vim处理多件事Vue.js 事件处理器Tkinter Event事件处理

相关工具

Cheney程序更新管理器“小镇故事”官网微信小程序DOM Updatequnit-domHappy DOM

相关文档

Python 黑帽编程（未更新完）Python 自然语言处理教程Perl 程序员应该知道的事前端工程师自我修养我的职业是前端工程师
快捷导航： 新手教程 算法原理 架构设计 Java进阶 数据库进阶 大厂专栏 面试经验 编程笔记 编程问答 所有专题 文档资料 工具软件 电子书籍 小牛导航
在线工具： 房贷计算器 个税计算器 Linux命令查询 Json格式化 正则表达式 颜色转换 AES加解密 SHA1加密 MD5加密 毒鸡汤 字数统计 随机密码生成 进制转换 Base64编解码 励志句子
Copyright © 2019-2024 小牛知识库@xnip.cn. All Rights Reserved.