HTML+JS+CSS 实现Tab选项卡

知道91 | 站长推荐 | 2014-03-07 | 阅读:12998

我们经常在网页特效中经常需要使用到Tab选项卡的特效,实现这种特效需要使用HTML、CSS、JS的综合运用。实现Tab选项卡介绍两种方法。

方法一:jQuery UI实现Tab选项卡

jQuery UI一个专门的网页特效的库,其官网是http://jqueryui.com/,在jQuery UI中引进相应的库就可以简单实现Tab选项卡。参考下面的代码





  
  jQuery UI Tabs - Default functionality
  
  
  
  
  



 

当我们拥有自己的技术博客的时候,我们往往会给出一些代码的示例,WordPress 编辑器本身没有添加编程语言代码的功能,我们需要借助一些代码插件来实现 WordPress 添加代码。下面介绍几款流行的WordPress代码插件。

ThinkPHP 中的函数库讲解 ThinkPHP 中的有系统函数库、项目函数库和扩展函数库三种。 ThinkPHP 系统函数库 ThinkPHP 的系统函数库顾名思义这是系统的函数库,是属于ThinkPHP框架本身就自带的,此函数库是必须的。

怎样在wordpress添加文章后,内容部分禁止自动添加p标签呢? 如果使用the_content()本来是默认添加了p标签的,这样有点时候很烦,并不是我们想要的样式,怎样禁止wordpress自动给编辑内容添加p标签呢?有两种方法。

其效果图如下所示:

jQuery 实现Tab选项卡图

jQuery UI同时还支持多种样式,你可以调整样式,并下载CSS文件。

使用jQuery UI实现html tab 选项卡的优点是:实现简单、方便、样式美观,多种样式选择,缺点是需要加载相应的库文件,加载文件较大,样式修改不易,自定义样式不是很方便。

自定义css+js 实现html tab 选项卡

html tab选项卡的原理就是一个tab按钮对应一个内容,我们需要显示当前选项卡对应的内容,而隐藏其他选项卡的内容,参考以下代码



 
 
 
 
 
 
 
 




效果图如下所示:

html tab 选项卡简单实现