Question

今天我试图创建一个完整的HTML / CSS滑块，我现在唯一的问题就是当我尝试单击下一个/上一个按钮时，我的页面滚动到页面顶部而我只是没有知道为什么。

互联网上的大多数解决方案都使用javascript或jquery，但我无法使用任何类型的JavaScript。

我希望有人能帮助我！当您单击下一个/上一个按钮时，您会发现问题！我在jsfiddle上做了一个例子，如下所示： https://jsfiddle.net/17cojwtv/

PS：我知道图片无效！

我的所有项目都是这样的：

<div class="slider">
  <ul>
    <li class="slide" id="no-js-slider-2">
      <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
      <a href="#no-js-slider-1" class="prev">prev</a>
      <a href="#no-js-slider-3" class="next">next</a>
    </li>
  </ul>
</div>

目前我只使用这个CSS：

ul li {
  list-style-type: none !important;
  margin: 0!important;
}

a.prev,
a.next {
  height: 100px;
  width: 43px;
  opacity: 0.7;
  text-indent: -99999px;
  cursor: pointer;
  -webkit-transition: opacity 200ms ease-out;
}

a.prev:hover,
a.next:hover {
  opacity: 1;
}

.prev {
  left: 0;
  /*  margin-top: 212px;*/
  position: absolute;
  background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -200px 25px;
}

.next {
  /*margin-top: 212px;*/
  left: 669px;
  position: absolute;
  background: #003f54 url('https://lh4.googleusercontent.com/-JN1IZLtuToI/UUoZnMG3C_I/AAAAAAAAAE8/SEbJ9nqXGnY/s226/sprite.png') no-repeat -167px 25px;
}

.slider {
  margin: 0 !important;
  /*position: relative;*/
  height: 474px;
}

.slide {
  position: absolute;
  height: 100%;
  width: 100%;
}

.slider .slide:target {
  z-index: 100;
}

.slider img {
  margin: 0 !important;
}

Answer 1

我认为网站上已经有类似的问题。无论如何你在这里使用onclick =＆＃34; return false;

          <li class="slide" id="no-js-slider-2">
         <img alt="" style="width: 712px; height: 474px;" src="/Manuals/MAN_20150317141748_a65c1730-e7f1-40f7-8/Images/inbrengen_mayo2.jpg" />
        <a onclick="return false; href="#no-js-slider-1" class="prev">prev</a>
        <a onclick="return false; href="#no-js-slider-3" class="next">next</a>
</li>

单击按钮时，HTML5 / CSS3滑块滚动到顶部

1 个答案: