HTML/CSS 按钮有效，但除非刷新页面，否则不会显示任何效果

Question

这是我第一次在这里询问。希望你们能帮助我。

对于一个客户，我正在为酒吧/餐厅创建一个网站。菜单卡页面设置的一部分。我在下面创建了 3 个按钮来在晚餐、午餐和饮料之间切换。每当我点击其中一个按钮时，我都会看到链接发生变化。奇怪的部分；我无法弄清楚为什么图像没有改变。如果我刷新页面（比方说更改的链接），它会显示它应该显示的图像。

我想我的问题是。如何确保图像随着按钮按下而改变，而无需重新加载页面。

HTML

    <span id="menu1"></span>
    <span id="menu2"></span>
    <span id="menu3"></span>

    <div class="image-container">
        <img src="img/menu1.jpg" class="slider-image">
        <img src="img/menu2.jpg" class="slider-image">
        <img src="img/menu3.jpg" class="slider-image">
    </div>

    <div class="button-container">
      <a href="#menu1" class="slider-button"></a>
      <a href="#menu2" class="slider-button"></a>
      <a href="#menu3" class="slider-button"></a>
    </div>
</div>

CSS

.slide-container {
  width: 495px;
  height: 750px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  text-align: center;
  margin-bottom: 30px;
  margin-top: 30px;
}

.image-container {
  width: 1485px;
  height: 700px;
  position: relative;

}

.slider-image {
  float: left;
  margin: 0px;
  padding: 0px;
  max-width: 495px;
}

.button-container {
  margin-top: 10px;
  position: relative;
}

.slider-button {
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 5px;
  background-color: black;
}

#menu1:target ~ .image-container {
  margin: 0px;
  margin-top: 5%;
}

#menu2:target ~ .image-container {
  left: -495px;
  margin-top: 5%;
}

#menu3:target ~ .image-container {
  left: -990px;
  margin-top: 5%;
}

如果有人有任何想法并可以提供帮助。谢谢你！

Answer 1

参见以下代码 sn-p，您需要将id 添加到元素并在锚标记中指定id，以便浏览器在单击锚时将页面向上滚动到该内容。

#section1,
#section2,
#section3,
#section4 {
  height: 400px;
  border-bottom: 1px solid #999;
}

<a href="#section1">Section 1</a>
<a href="#section2">Section 2</a>
<a href="#section3">Section 3</a>
<a href="#section4">Section 4</a>
<div id="container">
  <div id="section1">SECTION 1</div>
  <div id="section2">SECTION 2</div>
  <div id="section3">SECTION 3</div>
  <div id="section4">SECTION 4</div>
</div>