純CSS實現單擊錨點平滑切換的效果
純CSS實現單擊錨點平滑切換的效果
有時想實現一個功能，比如想讓頁面不出現滾動條，但是卻能裝下更多的東西，這個時候我們會對某個容器設置 overflow: hidden ，然后通過錨點來實現單擊切換頁面（其實只是控制顯示的內容）的效果。但是通過錨點來跳到指定內容的不足之處在于，沒有什么過渡效果，很突兀的就跳到了目標點。當然，也可以通過JS或者jQuery來實現自己想要的動態切換效果，這一類的文章一搜一大堆，這里就不贅述了。
但是在一些個人主頁中，比如github的個人主頁（只是主頁而已，也就是username.github.io）上會禁止JS腳本的運行，這個時候如果還是想通過單擊錨點平滑切換的功能的話，應該怎么辦呢？
原諒我是一個前端初學者，傻想了很久也想不到什么辦法，然后就百度谷歌了。
后來找到了一些方法，比如用radio配合他的check屬性來實現， 文章在這里 ,關于這個方法， 慕課 上也有專門的教程，大家也可以去看看。
但是可不可以不插入radio就實現對應的效果呢？ 答案是有的。
那就是利用 :target 偽類，這個選擇器可以選擇當前活動的錨點,那么利用這個屬性我們就可以實現自己想要的效果了。
代碼如下：
<a href="#tag1">Tag1</a> <a href="#tag2">Tag2</a> <a href="#tag3">Tag3</a> <div id="container"> <div id="tag1"></div> <div id="tag2"></div> <div id="tag3"></div> </div>
div{
width: 100px;
height: 100px;
border-radius: 50%;
}
#container{
margin-top: 10px;
outline: 1px solid red;
position: relative;
}
#tag1,#tag2,#tag3{
transition: all ease-out .2s;
position: absolute;
top:0
left:0;
right:0;
bottom:0;
opacity: 0;
}
#tag1{
background: #f66;
opacity: 1;
z-index: 1;
}
#tag2{
background: orange;
}
#tag3{
background: gray;
}
#container>div:target{
z-index: 1000;
opacity: 1;
}
上面的例子是通過絕對定位配合z-index和透明度來實現的動態效果。先將所有的元素的opacity設為0，然后為了默認顯示出來第一個元素，所以第一個元素的opacity為1，z-index為1。然后單擊就可以實現動態切換了。
其實我最先嘗試的是通過給 #container 設置 overflow: hidden; , 為它的子元素設置 height:100%; ，然后給target設置margin-top為負的百分比值來實現相應效果的，畢竟比較喜歡這種從下往上冒或者從上往下掉的感覺嘛。。。但是在實現過程中遇到了一點小問題，那就是當Tag2和Tag3相互切換的時候，居然只會移動到一半就不再動了，如果把 overflow: hidden 去掉，顯示的就是自己期望的效果。 一個有問題的DEMO
后來自己想到了解決的辦法，那就是給container包裹一個div，然后把 overflow: hidden 設置在這個元素身上，再把container的overflow去掉，設置高度為它子元素的高度，這樣就能顯示正常了。 DEMO在這里 .
雖然找到了解決辦法，但是對于 問題DEMO 里的這種怪異行為真的不理解，如果各位誰知道的話，還請告知，謝謝。