一个使用锚点的纯css图片切换

今天在网上看到一个很巧妙的对锚点的使用方法，一直以为锚点只会用在scroll里面，可以方便的挑战到某个scroll位置，没想到，当overflow：hidden的时候，锚点也能跳转到已经被隐藏的元素，从而巧妙的实习了纯css的图片切换。见代码：

<a href="#1">1</a>

<a href="#2">2</a>

<a href="#3">3</a>

<a href="#4">4</a>
   <div style="  overflow: hidden; width: 200px; height: 200px;"> 
     <div id="1" style=" width: 200px;height: 200px;background-color: red;"></div>
     <div id="2" style="width: 200px;height: 200px; background-color: yellow;"></div> 
     <div id="3" style=" width: 200px; height: 200px;background-color: blue;"></div>
        <div id="4" style="width: 200px;height: 200px;background-color: black;"></div>
  </div>

一个大div固定视区大小了，里面四个div只能被显示一个，剩下的全被overflow：hidden了，但是设置了锚点之后，点击对应的按钮就可以实现将那个被hidden的元素抓出来，移动到可视区域！一个简单地图片切换实现了~。