HTMLCSS按钮可以使用，但除非刷新页面，否则不会显示任何效果。

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

请看下面的代码片段，你需要添加 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>