如何用jQuery和CSS编写Tab栏切换功能的代码示例？

本文共计1106个文字，预计阅读时间需要5分钟。

最近面试时遇到需要实现一个Tab栏切换的功能。虽然基本概念懂，但实际编写时总是遇到一些困难。回顾思路后，决定先从基础做起。以下是实现该功能的一个简单示例：首先定义三个Tab按钮和三个内容区域，通过点击Tab按钮切换显示对应的内容。这种方法虽然基础，但对于理解Tab栏切换的工作原理非常有帮助。最终目标是实现如下效果：

前几天面试碰到现场给写一个Tab栏切换的功能，思想基本上懂，但是好久没写过，一时要全部实现效果还真有点难。回来后，再把思路理一理，写一个，基础还是很重要的。

最终要实现的效果图如下：

（1）点击tab栏显示对应的内容，并且tab栏样式变化。实现方式：一般tab栏如果要做成比较好看的样式，会切两张图作为背景，一张用于选中时的背景，一张用于未选中的背景。这里为了简单，只用css设置样式。然后为每个tab绑定click事件，当触发click事件时，对应的内容div的display设置block，否则设置为none。

（2）当鼠标悬停在没有选中的tab栏上时，改变样式，移开时又恢复回来的样式。如果tab栏已选中，则鼠标是否悬停不影响样式。实现方式：为tab栏添加hover事件，当鼠标进入时，判断该tab栏是不是被选中（可以为了选中的tab栏设置一个class，只需要判断是否含有该class即可），在不选中的情况下再添加hover的样式。