好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

纯CSS实现单击锚点平滑切换的效果_html/css_WEB-ITnose

纯CSS实现单击锚点平滑切换的效果

22.50注:貌似自己错的有点离谱了o(╯□╰)o 大家先别看了
有时想实现一个功能,比如想让页面不出现滚动条,但是却能装下更多的东西,这个时候我们会对某个容器设置overflow: hidden,然后通过锚点来实现单击切换页面(其实只是控制显示的内容)的效果。但是通过锚点来跳到指定内容的不足之处在于,没有什么过渡效果,很突兀的就跳到了目标点。当然,也可以通过JS或者jQuery来实现自己想要的动态切换效果,这一类的文章一搜一大堆,这里就不赘述了。

但是在一些个人主页中,比如github的个人主页(只是主页而已,也就是username.github.io)上会禁止JS脚本的运行,这个时候如果还是想通过单击锚点平滑切换的功能的话,应该怎么办呢?

原谅我是一个前端初学者,傻想了很久也想不到什么办法,然后就百度谷歌了。

后来找到了一些方法,比如用radio配合他的check属性来实现,文章在这里,关于这个方法,慕课上也有专门的教程,大家也可以去看看。

但是可不可以不插入radio就实现对应的效果呢? 答案是有的。

那就是利用:target伪类,这个选择器可以选择当前活动的锚点,那么利用这个属性我们就可以实现自己想要的效果了。

代码如下:

Tag1Tag2Tag3

查看更多关于纯CSS实现单击锚点平滑切换的效果_html/css_WEB-ITnose的详细内容...

  阅读:39次