HTML+JS+CSS 实现Tab选项卡

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

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

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

<!doctype html>
 <html>
 <head>
   <meta charset="utf-8">
   <title>jQuery UI Tabs - Default functionality</title>
   <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
   <link rel="stylesheet" href="/resources/demos/style.css">
   <script>
   $(function() {
     $( "#tabs" ).tabs();//点击按钮变换选项卡
     /*鼠标经过变换选项卡    
     $( "#tabs" ).tabs({
       event: "mouseover"
     });
     */
   });
   </script>
 
 </head>
 <body>
  
 <div id="tabs">
   <ul>
     <li><a href="#tabs-1">选项卡1</a></li>
     <li><a href="#tabs-2">选项卡2</a></li>
     <li><a href="#tabs-3">选项卡3</a></li>
   </ul>
   <div id="tabs-1">
     <p>当我们拥有自己的技术博客的时候，我们往往会给出一些代码的示例，WordPress 编辑器本身没有添加编程语言代码的功能，我们需要借助一些代码插件来实现 WordPress 添加代码。下面介绍几款流行的WordPress代码插件。</p>
   </div>
   <div id="tabs-2">
     <p>ThinkPHP 中的函数库讲解 ThinkPHP 中的有系统函数库、项目函数库和扩展函数库三种。 ThinkPHP 系统函数库 ThinkPHP 的系统函数库顾名思义这是系统的函数库，是属于ThinkPHP框架本身就自带的，此函数库是必须的。</p>
   </div>
   <div id="tabs-3">
     <p>怎样在wordpress添加文章后，内容部分禁止自动添加p标签呢？ 如果使用the_content()本来是默认添加了p标签的，这样有点时候很烦，并不是我们想要的样式，怎样禁止wordpress自动给编辑内容添加p标签呢？有两种方法。</p>
   </div>
 </div>
 </body>
 </html>

其效果图如下所示：

jQuery 实现Tab选项卡图

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

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

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

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

<html xmlns="">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Language" content="zh-CN" />
  <meta name="roots" content="" />
  <meta name="Keywords" content="" />
  <meta name="Description" content="" />
  <title></title>
  <style type="text/css">
 	body{font:"宋体";font-size:12px;}
 	a:link,a:visited{font-size:12px;color:#666;text-decoration:none;}
 	a:hover{color:#ff0000;text-decoration:underline;}
 	#Tab{margin:0 auto;width:220px;border:1px solid #BCE2F3;}
 	.Menubox{height:28px;border-bottom:1px solid #64B8E4;background:#E4F2FB;}
 	.Menubox ul{list-style:none;margin:7px 40px;padding:0;position:absolute;}
 	.Menubox ul li{float:left;background:#64B8E4;line-height:20px;display:block;cursor:pointer;width:65px;text-align:center;color:#fff;font-weight:bold;border-top:1px solid #64B8E4;border-left:1px solid #64B8E4;border-right:1px solid #64B8E4;}
 	.Menubox ul li.hover{background:#fff;border-bottom:1px solid #fff;color:#147AB8;}
 	.Contentbox{clear:both;margin-top:0px;border-top:none;height:181px;padding-top:8px;height:100%;}
 	.Contentbox ul{list-style:none;margin:7px;padding:0;}
 	.Contentbox ul li{line-height:24px;border-bottom:1px dotted #ccc;}
  </style>
  <script>
 	<!--
 	function setTab(name,cursel,n){
 	for(i=1;i<=n;i++){
 	var menu=document.getElementById(name+i);
 	var con=document.getElementById("con_"+name+"_"+i);
 	menu.className=i==cursel?"hover":"";
 	con.style.display=i==cursel?"block":"none";
 	}
 	}
 	//-->
  </script>
 </head>
 <body>
 <br><br>
 <div id="Tab">
   <div class="Menubox">
     <ul>
       <li id="menu1" onmouseover="setTab('menu',1,2)" class="hover">前台讲解</li>
       <li id="menu2" onmouseover="setTab('menu',2,2)" >PHP讲解</li>
     </ul>
   </div>
   <div class="Contentbox"> 
     <div id="con_menu_1" class="hover">
       <ul>
         <li>·<a href="http://www.zhidao91.com/jquery-get-browser-size/">JQuery 获取浏览器窗口的高度和宽度讲解</a></li>
         <li>·<a href="http://www.zhidao91.com/wordpress-code-hignlighter/">WordPress 代码插件介绍</a></li>
         <li>·<a href="http://www.zhidao91.com/thinkphp-tutorial-functions/">ThinkPHP 新手入门教程(五)之函数库讲解</a></li>
         <li>·<a href="http://www.zhidao91.com/wordpress-function-to-automatically-add-content-p-tag-wpautop/">WordPress中禁止给文章(post)内容(content)自动加上p标签</a></li>
         <li>·<a href="http://www.zhidao91.com/thinkphp-tutorial-config/">ThinkPHP 新手入门教程(五)之配置</a></li>
       </ul>
     </div>
     <div id="con_menu_2" style="display:none">
       <ul>
         <li>·<a href="http://www.zhidao91.com/asplianjiemssql/">ASP.NET C# 连接MSSQL数据库 详细图解</a></li>
         <li>·<a href="http://www.zhidao91.com/php-introduce/">PHP 简介</a></li>
         <li>·<a href="http://www.zhidao91.com/php-includes/">PHP Include 文件教程讲解</a></li>
         <li>·<a href="http://www.zhidao91.com/php-ref-string/">PHP 字符串</a></li>
         <li>·<a href="http://www.zhidao91.com/baiduseopaiminghejingjia/">百度seo排名和百度竞价你真正了解吗</a></li>
         <li>·<a href="http://www.zhidao91.com/wanpandajiansvn/">教你使用网盘搭建SVN</a></li>
         <li>·<a href="http://www.zhidao91.com/php-functions/">PHP 函数讲解</a></li>
       </ul>
     </div>
   </div>
 </div>
 </body>
 </html>

效果图如下所示：

html tab 选项卡简单实现