随着移动设备的普及，越来越多的网站开始使用响应式设计来适应不同的设备。在响应式设计中，tab 切换是一个非常常见的功能，但是在实现过程中却有一些需要注意的问题。
为什么需要考虑 tab 切换？
在响应式设计中，我们通常使用媒体查询来改变布局，但是布局的改变并不能满足所有需求。例如，我们可能需要在不同的 tab 之间切换内容，这时候就需要考虑如何实现 tab 切换。
常见的 tab 切换实现方式
利用 CSS 的 :target
利用 CSS 的 :target 伪类可以实现基本的 tab 切换效果。具体实现方式如下：
-- -------------------- ---- ------- ----- -- ---------------- ----- -- ---------------- ----- -- ---------------- ----- ------ ---- ------------- - ------------- ---- ------------- - ------------- ---- ------------- - ------------- ------- ---------------- - -------- ----- - --------
利用 :target 伪类，当链接被点击时，对应的元素会显示出来。
利用 JavaScript 实现
除了利用 CSS 的 :target，我们还可以通过 JavaScript 来实现更灵活的 tab 切换效果。
-- -------------------- ---- -------
-----
------- ----------- ----------------------- ----------
------- ----------- ----------------------- ----------
------- ----------- ----------------------- ----------
------
---- ------------- - -------------
---- ------------- - -------------
---- ------------- - -------------
--------
----- ---- - ----------------------------------
---------------- -- -
----------------------------- -- -- -
----- ------ - --------------------------------
--------------------------------------------------------- -- -
--------------------- - -------
---
-------------------------------------------- - --------
---
---
---------利用 JavaScript，我们可以根据当前被点击的按钮来显示对应的元素，实现更加灵活的 tab 切换效果。
响应式设计中的 tab 切换
在响应式设计中，我们需要考虑不同的屏幕尺寸下的 tab 切换效果。我们可以使用 CSS 的媒体查询来改变实现方式。
以下是一个简单的例子：
-- -------------------- ---- -------
---- -------------
-- ---------------- -----
-- ---------------- -----
-- ---------------- -----
---- --------- ----------------------- - -------------
---- --------- ----------------------- - -------------
---- --------- ----------------------- - -------------
------
-------
----- -
-------- -----
--------------- -------
-
------ ----------- ------ -
----- -
--------------- ----
-
------------ -
-------- -----
-
-------------------------- -
-------- ------
-
-
--------
--------
----- ---- - -------------------------------- ----
---------------- -- -
----------------------------- -- -- -
----- ------ - -------------------------
--------------------------------------------------------- -- -
--------------------- - -------
---
-------------------------------------------- - --------
---
---
---------在上面的示例中，我们使用了 flexbox 来实现响应式的布局。在大屏幕尺寸下，我们使用水平排列的方式来显示 tab 项，而在小屏幕尺寸下则使用垂直排列的方式。
同时，我们还使用了 :first-of-type 伪类来显示默认的 tab 内容。
总结
在响应式设计中，tab 切换是一个非常常见的功能，利用 CSS 的 :target 和 JavaScript 可以轻松实现基本的 tab 切换效果。在设计时，我们需要考虑不同屏幕尺寸下的表现，可以使用 CSS 的媒体查询来实现。同时，在实际开发中，我们还要注意一些细节，例如页面初始化时的默认显示、样式重置等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65920270eb4cecbf2d6ed3df