js+css制作选项卡特效,兼容IE6,IE7,火狐FF及Chrome
【WEB标准】
昨天有朋友让我做一个选项卡，兼容IE及FF等主流浏览器。今天上午抽空搞定，现把代码放出来，有些细节地方可能还需要自己做一下调整，我就不修改了，因为涉及到个人的皮肤样式。
代码如下：
代码如下：
流行热度：超过 人阅读
关 键 词：js 选项卡 兼容 css div IE6 IE7 火狐 FF Chrome
发布日期：daniel 发表于 2009-6-1 10:07:12
所属分类：【网站SEO - WEB标准】 - 【WEB标准】
文章链接：http://www.cookseo.com/blog/css/jscard/ [点击复制] (转载时请注明本文出处及文章链接)
引用地址：点击这里获取该日志的TrackBack引用地址
关 键 词：js 选项卡 兼容 css div IE6 IE7 火狐 FF Chrome
发布日期：daniel 发表于 2009-6-1 10:07:12
所属分类：【网站SEO - WEB标准】 - 【WEB标准】
文章链接：http://www.cookseo.com/blog/css/jscard/ [点击复制] (转载时请注明本文出处及文章链接)
引用地址：点击这里获取该日志的TrackBack引用地址
您或许对与WEB标准相关的文章感兴趣：
Firefox的div高度自适应 (2009-5-26 15:42:4) 利用CSS截取文本字数,防止文本溢出 (2009-5-26 15:38:14) 关于在静态页面整合JS图片轮播广告的方法 (2009-5-21 10:54:24) 很实用的图片切换效果代码 (2009-4-24 9:18:29) 区分IE6.0,IE7.0,FireFox的CssHack写法： (2009-4-20 15:1:33) CSS(CssReset)定义网站的整体元素样式 (2009-4-9 22:27:38) js文字滚动特效,可以停顿 (2009-2-20 19:45:51) css之解决span宽度的完美方案 (2008-12-18 10:55:32)
本文被踩了(11)次, 既然来了，我也要踩一脚
2009-6-1 15:30:03 回复该留言
还发现一个问题……
以上代码在IE7下 严重错位 错的看不见了
还发现一个问题……
以上代码在IE7下 严重错位 错的看不见了
daniel,2009-06-01 10:08 PM
我这台机器上面没有IE7，明天调试一下。这个问题好解决的。
我这台机器上面没有IE7，明天调试一下。这个问题好解决的。
daniel,2009-06-02 01:42 PM
IE7下面错位的问题已经解决！
IE7下面错位的问题已经解决！
2009-6-1 15:11:03 回复该留言
晕死 我不知道怎么调用<$RandomLog$>
用第二种方法放在static.htm没用
直接显示<$RandomLog$>
到底应该怎么调用
晕死 我不知道怎么调用<$RandomLog$>
用第二种方法放在static.htm没用
直接显示<$RandomLog$>
到底应该怎么调用
daniel,2009-06-01 10:07 PM
哈哈，你有时间把你的插件发过来我试一下。我调试好了再告诉你。
哈哈，你有时间把你的插件发过来我试一下。我调试好了再告诉你。
2009-6-1 12:51:23 回复该留言
首页的设置成只在首页显示？
首页的设置成只在首页显示？
daniel,2009-06-01 12:56 AM
这个插件你不要设置成系统模块就可以了。要是设成系统模块的话，会在静态也显示的。
只要不是系统模块，就可以正常显示了。不会重复的，静态页面用JS来调用就可以了。
这个插件你不要设置成系统模块就可以了。要是设成系统模块的话，会在静态也显示的。
只要不是系统模块，就可以正常显示了。不会重复的，静态页面用JS来调用就可以了。
2009-6-1 12:44:31 回复该留言
那要按你说的 那首页的不就两个了 重复了吗？
那要按你说的 那首页的不就两个了 重复了吗？
daniel,2009-06-01 12:54 AM
静态页面显示的是系统模块，如果想正常显示你要的内容，需要用JS来调用。
和在首页显示不冲突，怎么会出来两个呢？
http://www.cookseo.com/article/log/staticedm.htm
这个效果我网站上面也有的，不会出现两个的啊。
静态页面显示的是系统模块，如果想正常显示你要的内容，需要用JS来调用。
和在首页显示不冲突，怎么会出来两个呢？
http://www.cookseo.com/article/log/staticedm.htm
这个效果我网站上面也有的，不会出现两个的啊。
2009-6-1 12:03:44 回复该留言
你浏览我网站是正常的？静态页面啊？我的怎么不能正常滑动并切换啊
我把静态页面保存下来，删了几个首页没有的js代码 都不能正常显示侧边栏了……
你浏览我网站是正常的？静态页面啊？我的怎么不能正常滑动并切换啊
我把静态页面保存下来，删了几个首页没有的js代码 都不能正常显示侧边栏了……
daniel,2009-06-01 12:38 AM
静态页面是不能这样加的。参考方法请看：
http://www.cookseo.com/article/log/staticedm.htm
静态页面是不能这样加的。参考方法请看：
http://www.cookseo.com/article/log/staticedm.htm
2009-6-1 11:41:13 回复该留言
谢谢啊
但是现在发现一个致命的问题……
这个不能在静态页面用，怪事，烦恼的静态页面就正常的啊 难道代码不是一样的？你还知道什么问题啊
谢谢啊
但是现在发现一个致命的问题……
这个不能在静态页面用，怪事，烦恼的静态页面就正常的啊 难道代码不是一样的？你还知道什么问题啊
daniel,2009-06-01 11:47 AM
我把你的首页保存为静态页面，在本地运行一切正常。而且我浏览你网站的时候显示也是正常的。所以代码应该是没有问题的。
你看一下有没有冲突的CSS或者JS代码，最好的办法就是保存为静态页面在本地测试，把其它的代码去掉，然后再一块一块地恢复，就可以看出来问题所在了！
我把你的首页保存为静态页面，在本地运行一切正常。而且我浏览你网站的时候显示也是正常的。所以代码应该是没有问题的。
你看一下有没有冲突的CSS或者JS代码，最好的办法就是保存为静态页面在本地测试，把其它的代码去掉，然后再一块一块地恢复，就可以看出来问题所在了！
2009-6-1 11:32:50 回复该留言
这个我原来在别人的blog碰到过
应该是ubb代码框没显示出来吧？
不过我在我的blog没这个问题 汗
这个我原来在别人的blog碰到过
应该是ubb代码框没显示出来吧？
不过我在我的blog没这个问题 汗
daniel,2009-06-01 11:35 AM
呵呵，刚才留言已经ok了！
呵呵，刚才留言已经ok了！
2009-6-1 11:01:07 回复该留言
原来你是严格按照我的要求 把触发方式也改了啊 呵呵刚才我没注意看 现在我已经改成移动鼠标触发了
但是现在想让触发后的，有个表示，比如现在是现实“热门日志”，那怎么能让热门日志的字体颜色变下，再帮我改下啊 呵呵
原来你是严格按照我的要求 把触发方式也改了啊 呵呵刚才我没注意看 现在我已经改成移动鼠标触发了
但是现在想让触发后的，有个表示，比如现在是现实“热门日志”，那怎么能让热门日志的字体颜色变下，再帮我改下啊 呵呵
daniel,2009-06-01 11:29 AM
1、底部空了一排的BUG已经修正；
2、触发方式已经改为鼠标滑动触发；
2、触发后，字体颜色变化效果已经实现；
1、底部空了一排的BUG已经修正；
2、触发方式已经改为鼠标滑动触发；
2、触发后，字体颜色变化效果已经实现；
2009-6-1 10:54:43 回复该留言
恩谢谢啊 你好强啊
问几点问题
1、为什么现在不是滑动的 而是点击的啊？
2、其实也不算什么问题 就是底部空了一排
3、谢谢你啊
那个留言板是哪里有问题啊？为什么我留言都是正常的
恩谢谢啊 你好强啊
问几点问题
1、为什么现在不是滑动的 而是点击的啊？
2、其实也不算什么问题 就是底部空了一排
3、谢谢你啊
那个留言板是哪里有问题啊？为什么我留言都是正常的
daniel,2009-06-01 11:22 AM
1、是点击不是滑动是按照你的网站的展现方式来做的。
2、底部空了一排，你改一下高度就可以了。
.endContent { margin-top:6px; height:250px; font-size:12px; line-height:180%;}
把这里面的height:250px改小一点就ok了。
3、呵呵，不用客气。
4、我提交留言的时候，提示内容为空
1、是点击不是滑动是按照你的网站的展现方式来做的。
2、底部空了一排，你改一下高度就可以了。
.endContent { margin-top:6px; height:250px; font-size:12px; line-height:180%;}
把这里面的height:250px改小一点就ok了。
3、呵呵，不用客气。
4、我提交留言的时候，提示内容为空
◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。