jQuery自动切换/点击切换选项卡，Tab选项卡切换很多时候在网页中经常用到，这里只是简单的介绍下Tab选项卡切换技术。

这次没有用到jquery库就实现了，其实这个功能主要用于一些排行榜比较多的网页，比如博客、论坛等的热门，最新，随机做成tab选项卡，就可以显示更多的排行榜。

下面的代码演示只是用了3个，但是你可以直接添加li和li对应的div就可以添加选项卡，还有修改css这个就不用说了。

源码简单说明，并附上源码包：百度网盘

第一段代码是html代码：

很多时候为了清楚显示行数据，便于阅读，一般多是采用隔行颜色交替显示。

当然实现的方式也有很多，如果对于网站已经加载了jQuery（现在很多网站程序多是加载了jQuery的）可以很容易实现。

那么就来说说jQuery实现表格的隔行换行颜色的交替显示，效果图如下

这里主要展示了2个代码，国家/省/市/县四级联动，和省市二级联动 下拉菜单。

这种地址的联动模式很多网站在用，当然实现方式也是不同的，有数据库版本的联动，还有无数据库版本的联动，这个的2个联动是无数据库的。

这2个也只是收集了部分的地址，地址是不全的，需要自己添加。

当然这2个只是演示，不考虑其他因素的，因为第1种多有缺陷，第一种四级联动，如果把所有国家地址多精确的话，那么js地址文件将变的非常庞大。所以改照成三级联动的话可能会还是可以用用的（省市县）。省市县数据庞大建议还是用带数据库版本的。可能使用第2种省市选择+手动输入剩余地址的方式比较好。

看到别的网站上有一款导航栏非常漂亮，用jQuery来实现Lava-Lamp样式的动画菜单。

这是一款基于JQuery的水平滑动导航条，但是由于要加载JQuery和JQuery UI库，所以需要加载的js有点大。

浏览器兼容性：IE6、8，Firefox，chrome均能正常显示，但是用到了css圆角所以在不同的浏览器中由于浏览器的支持性问题，css圆角不会显示。

用jQuery来实现图片链接的预览功能。

代码说明：

通过imgPreview插件来实现鼠标移动到图片或者文字链接的上来实现图片预览的功能。链接一定要为图片才可以显示。

预览大图可以通过css来更改宽度，改变预览图片的大小。

代码实现过程请看压缩包内的index.htm页面。

浏览器兼容性：IE6，FireFox，IE7和Chrome等均测试正常。

用jQuery或JavaScript实现在textarea光标处插入一些文本内容以及字符串。

该代码说明：

可以在input框内的填写任意内容，然后按“插入”，可以把input框内的内容插入到textarea文本框内光标处，光标默认在文本框开头。通过其他的js就可以实现文本框插入表情、选中文字加粗、内容中插入图片等等。

浏览器兼容性：IE6，FireFox，IE7和Chrome等均测试正常。

SyntaxHighlighter这个是一个高亮插件。现在被用于很多网站的代码显示。

但是SyntaxHighlighter3.0.83，由于自适应宽和高，导致一直有滚动条的问题。

其实这个问题可以修改css文件可以去掉。修改主题文件shCoreDefault.css（默认模版）

去掉右侧滚动条：

大概在shCoreDefault.css文件39行位置：

padding:0 !important;