一、结构层（Structure）：虽然网页上到处都是各种各样的选项卡但从结构层即 HTML 上主要有两种写法：普遍采用的是第一种即将用于触发动作的所有选项卡的标题写到一组，再将该选项卡中所有页的内容写到一组并保持两者对应顺序一致，然后使用 JavaScript 判断触发点击或划过的是第几个标题然后显示与该标题相应的第几个内容即可，该结构因为代码比较简单 JS 也容易加所以被多数网站采用；而我个人则倾向于第二种结构即每一个选项卡页的内容均单独编码，然后额外添加一个容器用来展示被选中的选项卡内容，虽然该方法的代码量会较第一种更多及复杂但可以保证在客户端即使禁用掉 CSS JavaScript 也仍具有很好的可读性，而同样的对于搜索引擎优化（SEO）更是如此，该结构可以更为清晰的告知搜索引擎你的内容组织方式及相互关系其代码如下：

//首先是多数站点采用的写法：

标题一标题二标题三


内容一

内容二

内容三



 //如果用户禁用 CSS JS 内容将失去相关性及联系性

//然后我自己比较推荐的写法：


标题一
内容一
标题二
内容二
标题三
内容三



 //对于搜索引擎和禁用 CSS JS 的客户端依然可以保持良好的结构性

二、表现层（Presentation）：然后就可以为上述 HTML 代码添加 CSS 样式了，其目的很简单就是将选项卡修饰一个使其更像一个选项卡吧，这里仅提供第二种结构写法的样式代码关键部分，其他如果需要更多的修饰可以自行添加，具体代码如下：

.itab { }
.itab dl { margin:0; padding:0; }
.itab dt { float:left; padding:5px; cursor:pointer; }
.itab dt.active { }
.itab dd {/* display:none; */} /* 这个隐藏也建议由 JS 来实现如果客户端仅禁用 JS 却支持 CSS 的情况下不影响 */
.itab .tabBody { clear:both; }

三、行为层（Behavior）：最后当然是起重要作用的行为层了，主要对用户的一些操作如点击划过等触发一些事件从而改变现有的结构层代码达到选项卡的目的，具体代码如下：

$('.itab dd').hide();  //这里可以交给 CSS 隐藏但那样支持 CSS 不支持 JS 的客户端就郁闷了；
$('.itab').append('


');
$('.itab dt').click(function(){
	$('.itab .active').removeClass('active');
	$(this).addClass('active');  //用于辅助 css 修饰的 class 可区分哪个是当前点击的标题；
	$('.itab .tabBody').empty().append($(this).next().clone());
}).eq(0).click();

我这里偷懒用了 jQuery 首先是隐藏掉原来已经有的各个内容 dd 然后为整个选项卡 itab 最后添加了一个名为 tabBody 的容器用来存放要展示的内容，接着就可以为标题绑定事件了这里选了点击（click）当然你可以可以使用划过（hover）等等，当鼠标点击标题 dt 的时候先清空容器 tabBody 的内容，然后将当前被点击的标题 dt 下面的内容 dd 克隆一份放置到容器 tabBody 中，过程非常简单，另外用于操作 class 的两句是为了方便 CSS 修饰当前被激活的标题。

这样结构的选项卡其优点是很明显的，可以很清楚的告诉搜索引擎和关闭 CSS JS 的客户端你的内容结构层次，当然代码上特别是 JS 代码上会稍显复杂但这样的成本我个人认为是非常值得的，也有人会说现在哪还有不支持 CSS 和 JS 的客户端呢，其实我很多时候也有过这样的想法，但好在当我看到自己的项目在一些掌上浏览器的浏览效果的时候及时否定了自己的想法……

使用 jQuery 替换 Drupal Term 术语文本框里的中文标点：

$('input.form-text').blur(function(){
    $(this).val($(this).val().replace(/，/g, ', '));
    $(this).val($(this).val().replace(/、/g, ', '));

    $(this).val($(this).val().replace(/，/g, ', ')).val($(this).val().replace(/、/g, ', '));
});

上面几行 jQuery 代码会在文本框失去焦点的时候触发，当然你也可以使用表单的 submit 触发代码替换事件，上面代码中的选择器也需要在具体项目中修改，两行代码分别会替换术语框中的中文逗号和顿号为英文的逗号，可以根据具体项目需求修改，如果两个符号均需要替换就可以采用后面的 jQuery 连写方法。

XHTML 代码：

    ... ... ... ...

jQuery 代码：

jQuery(".node .node-list").removeClass("node-page");

问题说明：如上面提供的两段代码中，如果在上面的 div 属性 class 中的 node node-page node-list 中使用 tab 跳格符分隔，后面 jQuery 代码中的选择器将无效，如果使用 space 空格分隔的话 jQuery 选择器正常，但无论哪种情况都不会影响 css 中的选择器渲染。

当然这种情况是可以理解的，毕竟通常情况下多个 className 中不可能含有 tab 跳格符，当然也是 W3C 不支持的。但如果在 CMS 中由程序生成多个类名时，就不免会有此种情况出现。

这里用到了 WordPress 的 wp_enqueue_script 函数，以下代码将添加到当前主题的 functions.php 文件中：

// 直接使用 wp_enqueue_script 引入即可同时自动注册该库：

// 1、使用 jQueryTools 提供的 CDN 地址加载，但目前提供该服务的 NetDNA 在亚洲还没有服务器；
wp_enqueue_script('jquery-tools', 'http://cdn.jquerytools.org/1.1.2/jquery.tools.min.js', array('jquery'), '1.1.2');
// 2、最好还是直接从本地加载吧，后面的地址根据具体情况修改；
wp_enqueue_script('jquery-tools', WP_CONTENT_URL.'/themes/anyLiv/script/jquery.tools.min.js', array('jquery'), '1.1.2');

// 如果你跟我一样想把 jQueryTools 合并到 jQuery.js 文件中的话需要下面代码：
wp_deregister_script('jquery');      // 首先反注册 jquery 库的句柄；
wp_enqueue_script('jquery', WP_CONTENT_URL.'/themes/anyLiv/script/jquery.tools.min.js', false, '1.3.2');
// 反注册以后重新引入同名的 jquery 库但文件是打包了 jquery + jQueryTools 后的 js 文件；

将上面的代码加入当前主题目录下的 functions.php 中即可在模板中使用 jQueryTools 提供的方法了，如果不需要在 WordPress 后台页面也出现 jQueryTools 的话可以在外面使用 !is_admin() 作为条件判断即可。

后面覆写 jQuery 句柄的方法也可以用来在 WordPress 主题中禁用 jQuery 反注册后不使用 enqueue_script 即可；也可以用于替换 WordPress 默认的 jQuery 版本，如果当前 WP 附带的 1.3.2 版本并不适合你的主题，你可以使用上面的方法替换成低版本的 jQuery 库或者替换成你的 CDN 地址也是可行的（如使用 GoogleAPI 提供的地址：http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js 等等）。

其中 wp_enqueue_script() 的函数格式可访问 http://codex.wordpress.org/ 查询或参考下面：

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

$handle：句柄，所引入 JavaScript 的唯一命名；

$src：地址，所引入的 JavaScript 的地址；

$deps：依赖，所引入 JavaScript 的依赖情况，数组格式如上面的 array(‘jquery’) 字串；

$ver：版本，所引入 JavaScript 的版本；

$in_footer：页脚输出，这是 2.8.x 新加入的一个参数用于在页脚 wp_footer() 位置输出；

以上的参数除 handle 以外均为可选，另外覆写 jquery 句柄的时候注意版本号最好和当前 WordPress 版本号一致。

最近在帮 anyDzn.com 测试新版首页的时候发现的，左边的半圆形主导航链接在点击的时候会出现一个虚线框，有点影响美观，于是添加了以下代码（基于 jQuery 库兼容 Firefox 等浏览器）：

jQuery(function($){
    $('a,input[type="button"]').focus(function(){
        $(this).blur();      //在获取焦点的时候马上失去焦点；
    });
});

原理：其实原理很简单，就是当这个链接或按钮在被点击获取焦点的时候马上用 JS 使其失去焦点即可。

缺点：但该方法也有缺点，对于使用 tab 键切换焦点及不使用鼠标的用户会无法定位焦点到该链接上，这样的牺牲往往是不值得的。而如果将 focus 事件修改为 click 事件的话虽然可以使用 tab 定位焦点，但在点击的瞬间还是会有一个虚线框。开发者可以根据自己的实际情况选择合适的解决方案，但不可为了这点效果而使用户做出牺牲。

1、为需要弹出新窗口的 a 标记添加 rel=”external” 属性；

2、为页面添加 js 或 jQuery 代码；

a、纯 JavaScript 代码：

function externallinks(){
  if (!document.getElementsByTagName) return;
  var anchors = document.getElementsByTagName("a");
  for (var i=0; i
b、使用 jQuery 添加下面一句代码即可：
$("a[@rel$='external']").click(function(){ this.target = "_blank"; });

可以看出使用 jQuery 确实是 “Write Less Do More” 的非常方便。当然如果你跟我一样正在使用 WordPress 或通常想偷懒而不愿意手工为一些 a 链接添加 rel 属性的话，可直接添加下面的 jQuery 代码：

$(".post > .body a").not(".more-link").attr("target","_blank");

这句 jQuery 代码是为所有博客正文中的 a 标签硬性添加 target="_blank" 属性值而不考虑 rel="external" 属性，其中 post 和 body 类名需要根据你的主题模板调整，因为通常正文中引用的链接绝大多数都需要新开窗口浏览，而网站的其他导航部分的链接通常不需要新开窗口。

补充：用于 a 标签的 rel 属性还有其他的一些值如：next、previous、chapter、section 等等，在 W3C 中 rel 属性主要为了说明“该链接”与“包含该链接的页面”之间的关系。

【完整的在线网站技术参考手册】 by W3School.com.cn

网站地址：http://www.w3school.com.cn/

简单说明：该网站几乎囊括了所有网站开发的中文版技术手册，从最基础的 (X)HTML 到 JavaScript XML 甚至是 ASP PHP MySQL 和 WAP 等等，几乎目前所有的主流开发手册都可以在这里找到。另外也有一些小测验方便考察自己的能力，一些简单的教程帮助初学者掌握要点。

【层叠样式表 CSS3.0 参考手册】 by 腾讯互联网业务系统网站组

发布页面：http://webteam.tencent.com/css3/

下载地址：http://webteam.tencent.com/css3/css3.0manual.chm.zip

简单说明：相信不少朋友都跟我一样捧着 苏昱 的样式表手册看了一年又一年吧，但由于其主要内容基于微软发布的一些文档再加上版本过旧，所有难免有些地方可能与 W3C 的标准有悖，这里腾讯网页重构团队为我们详细整理了 CSS3 的参考手册，内容非常全面囊括主流的浏览器支持情况及各种示例代码截图等等，随着主流浏览器对 CSS3 的逐渐支持，该手册的重要性也会越来越强，总之，人手一本的参考手册吧。

【层叠样式表 CSS2.1 参考手册】 by CSS8.cn

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表CSS21手册byCSS8.rar

简单说明：这是 CSS8 论坛整理并发布的 CSS2.1 参考手册，详细描述了 CSS2.1 标准中每个属性的语法及兼容性，也添加了 IE 浏览器的一些私有属性并配以示例代码，该手册由 CSS8.cn 维护并更新。

【层叠样式表 CSS2.0 参考手册】 by 苏昱

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表CSS20手册by苏昱.rar

简单说明：这是来自 苏昱 基于微软 MSDN 文档库整理的 CSS2 样式表参考手册，相信也是大部分网站前端一直收藏使用的手册之一，该手册 2001 年发布首个版本以后与 2002 年进行了唯一的一次更新，该手册内容主要来自 MSDN 文档，所有仅有 IE 浏览器的部分（话说即使是今天国内的 IE 浏览器市场仍在 98% 以上）值得收藏的一本手册吧。

【层叠样式表 IE 滤镜参考手册】 by 苏昱

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/样式表IE滤镜手册by苏昱.rar

简单说明：同样来自 苏昱 整理的微软 Internet Explorer 浏览器样式表滤镜手册，其实该手册并不推荐大家使用，毕竟只有 IE 浏览器支持这些滤镜。

【jQuery 1.3 API 中文版手册】 by 一揪

发布页面：http://code.google.com/p/jquery-api-zh-cn/

在线浏览：http://jquery-api-zh-cn.googlecode.com/svn/trunk/xml/jqueryapi.xml

下载地址：http://code.google.com/p/jquery-api-zh-cn/downloads/list

简单说明：优秀的 jQuery 类库是一个优雅的 JavaScript 增强类库，使用 CSS 的选择器大大方便了开发人员并完美处理了浏览器兼容性问题，使开发者可以将全部的精力放在网站主体“Write Less Do More”很好的解释了 jQuery 的用途及价值。该手册由 一揪 整理并保持更新目前已超过 14 万次下载。

【jQuery 1.3 API for Dreamweaver】

下载地址：http://cid-1b6bfa69bfa348b5.skydrive.live.com/self.aspx/OpenData/TechBook/jQueryAPI-ForDw-MXP.rar

简单说明：这是用于 Adobe Dreamweaver CS3/CS4 的 jQuery 自动完成插件，里面包括了 CS3 CS4 的 MXP 安装版与绿色版插件，安装以后使用 jQuery 编写 jQuery 文档的时候会有代码自动完成及提示信息，非常方便实用。

…… 未完·待续 ……

首先是原理，其实很简单对于两栏的博客来说，当页面主要内容部分的高度小于边栏的高度时，就删除边栏上最后一个小工具（因为我的小站最下面几个小工具都是无关紧要的小组件所以删除几个也不会有什么影响）代码如下：

简单解释一下：首先是载入 jQuery 库然后用了一个 while 循环，如果边栏高度大于主体内容的高度就 remove 掉最后一个 class 为 toys 的小工具，然后再次循环检查直到主体内容高度大于边栏。当然这里的 side 为边栏的 class 这里的 main 为页面主体内容的 class 还有 toys 为边栏每个小工具的 class 这些名字需要根据你的主题模板调整后再将代码放入你的主题的 head 标签中即可。

修改之前的首页加载时间 7s 页面大小 215kb 左右；修改之后的首页加载时间 5s 页面大小 133kb 左右。

目前使用 YSlow 测试按照小型网站及博客标准（Small Site or Blog）可以得到 Grade A 相当不错了，如果将 TagCloud.swf 压缩并使用 GoogleAPI 加载 js 的话理论上页面加载速度还可以更快，暂时还是这样吧，由于浏览器缓存原因页面上的部分内容可能显示错误，建议使用 Ctrl+F5 重新加载一次本站页面更新浏览器缓存。

一、整合 LightBox 插件：

整合 LightBox 相对要容易的多，其实此类插件有很多如 AutoThickBox LightBox2 等等，相关的 js 类库也有很多，我这里选的是 jQuery LightBox Plugin 原因是本站之前已经引入了 jQuery 类库，所以之后添加的 js 都会在 jQuery 的基础上考虑，另外我个人使用过得类似功能的 js 插件中这个插件最小而且功能够用，非常划算。

1、下载 jQuery LightBox Plugin 插件，下载页面：http://leandrovieira.com/projects/jquery/lightbox/；

2、将 js 及 css 引入模板文件，这里具体路径需要根据实际情况调整：