CSS中的目标使页面跳转

问题描述

在使用CSS作为目标元素时，有什么方法可以阻止页面跳转吗？在下面，您将看到HTML和CSS的示例。我对编码非常陌生，这可能是错误的做法。我试过像这样＃/ question1添加它，但这似乎无济于事。如果您需要了解其他任何信息，请询问，我会尝试提供。

*::before,*::after {
  margin: 0;
  padding: 0;
  Box-sizing: inherit;
}
section {
  width: 100%;
  height: 100vh;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-container {
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.faq-item {
  background-color: rgb(138,29,51);
  border-radius: 0.4rem;
  margin-bottom: 1rem;
  padding: 1rem;
  Box-shadow: 0.5rem 2px 0.5rem rgba(0,0.1);
}

.faq-link {
  font-size: 1.6rem;
  color: rgba(255,255,0.8);
  text-decoration: none;
  background-color: rgb(138,51);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}
.faq-link i {
  color: #e7d5ff;
  padding: 0.5rem;
}
.faq-link .fa-minus {
  display: none;
}
.answer {
  max-height: 0;
  overflow: hidden;
  position: relative;
  background-color: rgb(145,24,48);
  transition: max-height 650ms;
}
.answer::before {
  content: "";
  position: absolute;
  width: 0.6rem;
  height: 90%;
  background-color: crimson;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.answer p {
  color: rgb(255,154,169);
  font-size: 1.4rem;
  padding: 2rem;
}
.faq-item:target .answer {
  max-height: 20rem;
}
.faq-item:target .faq-link .fa-plus {
  display: none;
}
.faq-item:target .faq-link .fa-minus {
  display: block;
}

<section>
    <div><h1 class="faq-title">Fre<span>q</span>u<span>e</span>ntly As<spanuently>k</spanuently>ed Que<span>s</span>t<span>i</span>ons</h1></div>
      <div class="faq-container">
          <div class="faq">
              <div class="faq-item" id="question1">
                  <a class="faq-link" href="#question1">
                      What items do you sell at Benji's Equestrian?
                      <i class="fas fa-plus"></i>
                      <i class="fas fa-minus"></i>
                  </a>
                  <div class="answer">
                    <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit. 
                      Ut facilisis odio non dui laoreet,rhoncus pretium nisi venenatis. Morbi maximus,nibh nec ullamcorper ornare,urna urna lacinia enim,sed molestie risus magna sit amet eros. 
                      Donec lobortis elit eget nulla facilisis,sit amet tincidunt nunc porttitor.</p></div>
              </div>
          </div>
          <div class="faq">
              <div class="faq-item" id="question2">
                  <a class="faq-link" href="#question2">
                      How do i get my items when i have bought them?
                      <i class="fas fa-plus"></i>
                      <i class="fas fa-minus"></i>
                  </a>
                  <div class="answer">
                  <p> Lorem ipsum dolor sit amet,consectetur adipiscing elit. 
                    Ut facilisis odio non dui laoreet,sed molestie risus magna sit amet eros. 
                    Donec lobortis elit eget nulla facilisis,sit amet tincidunt nunc porttitor.</p></div>
              </div>
          </div>
          <div class="faq">
              <div class="faq-item" id="question3">
                  <a class="faq-link" href="#question3">
                      What is Benji's Equestrian?
                      <i class="fas fa-plus"></i>
                      <i class="fas fa-minus"></i>
                  </a>
                  <div class="answer">
                    <p> Lorem ipsum dolor sit amet,sit amet tincidunt nunc porttitor.</p></div>
              </div>
          </div>
          <div class="faq">
              <div class="faq-item" id="question4">
                  <a class="faq-link" href="#question4">
                      Is there a postage fee?
                      <i class="fas fa-plus"></i>
                      <i class="fas fa-minus"></i>
                  </a>
                  <div class="answer">
                    <p> Lorem ipsum dolor sit amet,sit amet tincidunt nunc porttitor.</p></div>
              </div>
          </div>
      </div>
  </section>

谢谢您的帮助，希望这是我没有做过的事情。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）