纯HTML、CSS制作Tab页面浏览(国外youtube分享)

纯HTML、CSS制作Tab页面浏览(国外youtube分享)

影片来源 h ttps://www.youtube.com/watch?v=oLqdy95LZSw&list=WL&index=72&t=259s

近期执行一个小Project，主要是复制网页版VS code的配置当作个人Profolio的简介想法，但是遇到了Tab分页的画面效果呈现，初步想法是应该是要用JavaScript才有办法实现，Google之后，发现基本上不外乎JavaScript DOM、JQuery的方式去实现，于是又找了一下youtube，发现有纯HTML+CSS的呈现方法，简单易懂，也为我技能书很薄的CSS新增了不同的想法，所以纪录逐字分析一下。

Images from ****YouTube by iEat 网站

正文开始，先基础做出HTML，使用去作出tpye=”radio”的选取钮，然后

里列入文章(VSC里可用lorem+字数产生文章)，并且给予不同的class名称，以3篇文章做示范，如下图。

Images by HCW

然后就是CSS的部分，除了颜色、排版以外，基本上有几个步骤

－radio样式取消
－运用order顺序把所有的往上排。
－[type="radio"] :checked + label +.tab { display : block ;}
－制定[type=”radio”] :checked + label 的背景颜色

看起来会有点奇怪是因为我原本用的是Sass 他watching之后的产出，不是原生的CSS，但是基本上按照影片内的步骤可以看到成果渐渐变成想要的样子，有时间再更新图样比较好理解，但是基本上大概就是这样。

关于CSS 里面的＋号跟order，可以参考MDN文件，有说明可以参考运用。
https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_combinator
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Ordering_Flex_Items

果然网路大神还是多多，每种语言给每个人方法跟理解都不一样，这个纯粹是CSS做出分页导览，但是至于想要在分页多加取消键(x)，还是需要用JavaScript去实现比较实际。

(第二次打文章语意上还比较不纯熟，还请见谅。)

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/37738/49081818