收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 3865|回复: 15

[讨论] 老掉牙了 tab选项卡问题 用jQuery写 反而被CSS的问题难住了....求助!在线等!

[复制链接]
发表于 2008-2-22 16:53:49 | 显示全部楼层 |阅读模式
有问题的demo:
http://TimeWillTell.cn/demo/jQtabDIY2/

IE下很好 几乎没有CSS的问题
但是在FF下  当前以外的两个content的border-top却被选项卡item给拦住了 和IE里的效果不一样
z-index加在哪里 都不会好使 还有position也是......不知道怎么办了...... 特来经典求助!

(高手们 本人是想自己写tab选项卡  希望不要给我发那些已有的tab选项卡效果.............谢谢合作...........)

望CSS的高高高高手解决
非常感谢!!!

以下是全部代码-----

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>自己动手写jQuery_Tab选项卡效果</title>
  6. <script src="http://timewilltell.cn/js/jquery-1.2.3.pack.js"></script>
  7. <SCRIPT type=text/javascript>
  8. $(function() {
  9.         $(".item2,.item3").hide();
  10.         $("a.btn1").addClass("on");
  11.         $("div.item1").addClass("onbg");
  12.        
  13.         $("a.btn1").click(function(){
  14.                 $(".btn1").addClass("on");
  15.                 $("a.btn2,a.btn3").removeClass("on");
  16.                 $(".item2,.item3").hide(1).removeClass("onbg");
  17.                 $(".item1").addClass("onbg").slideDown(600);
  18.                 return false;
  19.         });
  20.         $("a.btn2").click(function(){
  21.                 $(".btn2").addClass("on");
  22.                 $("a.btn1,a.btn3").removeClass("on");
  23.                 $(".item1,.item3").hide(1).removeClass("onbg");
  24.                 $(".item2").addClass("onbg").slideDown(600);
  25.                 return false;
  26.         });
  27.         $("a.btn3").click(function(){
  28.                 $(".btn3").addClass("on");
  29.                 $("a.btn1,a.btn2").removeClass("on");
  30.                 $(".item1,.item2").hide(1).removeClass("onbg");
  31.                 $(".item3").addClass("onbg").slideDown(600);
  32.                 return false;
  33.         });

  34. });
  35. </SCRIPT>

  36. <style>
  37. *{ margin:0; padding:0; font-size:12px;color:#333;}
  38. .tab{width:400px;margin:50px auto 0 auto;padding:5px 0 0 0; height:170px; }
  39. .btn{padding:2px;}
  40. .btn a{border-top:1px solid #ccc;border-right:2px solid #999;border-bottom:0px solid #777;border-left:1px solid #ccc;margin:0 2px;padding:5px 15px;text-decoration:none; z-index:99999;  background:#F0F8FF;  }
  41. .btn a:hover{ color:#FF6600}
  42. .item1,.item2,.item3 {
  43.         margin:-13px 0 0 0;
  44.         margin:-14px 0 0 0!important;
  45.         *margin:-13px 0 0 0!important;
  46.         *margin:-13px 0 0 0;
  47.         padding:10px;
  48.         border:1px solid #888;
  49.         height:120px;
  50.         z-index:999999999999999999999999999999999999999999999;
  51.         }
  52. .tab div p{text-indent:2em;}

  53. .btn a.on{ color:red; position:relative; background:#fff;z-index:1;}
  54. .onbg{ background:#fff; }

  55. .googlead{width:760px; text-align:center; border:1px solid #ccc; margin: 20px auto 0 auto; height:120px;}
  56. .btm{ text-align:center;}
  57. </style>
  58. </head>

  59. <body>
  60. <div class="tab">
  61.         <div class="btn">
  62.                 <a href="#" class="btn1">Item1</a>
  63.                 <a href="#" class="btn2">Item2</a>
  64.                 <a href="#" class="btn3">Item3</a>
  65.         </div>
  66. <div class="item1"><P>1自己动手写卡写jQueryTab选项卡选项卡</p><P>1自己动手选项卡选项卡</p></div>
  67.       <div class="item2"><P>2自己项卡</P><P>2自己动手写jQueryTabQueryTab选项卡自己动手写jQueryTab选项卡</P></div>
  68.       <div class="item3"><P>3自己动手写jQueryTab选选项卡</p><P>3自己动手写写动手写jQueryTab选项卡</p></div>
  69. </div>

  70. </body>
  71. </html>

复制代码

[[i] 本帖最后由 shanhero 于 2008-2-22 16:56 编辑 ]
 楼主| 发表于 2008-2-22 18:14:30 | 显示全部楼层
晕..................................这么长时间都没人来...................
回复 支持 反对

使用道具 举报

发表于 2008-2-22 19:19:08 | 显示全部楼层
随便说说,仅供参考~
如果是z-index层次叠加导致这个问题的话,可以试着在你目前所有设有z-index属性的标签里同时添加position:relative属性;
对于IE单独的设置z-index貌似是不会起作用的,必须使其先获得定位属性(position:absolute/relative)

顺带请路过的朋友帮我去看看这个问题:
http://bbs.blueidea.com/thread-2832138-1-1.html

[[i] 本帖最后由 tsun1024 于 2008-2-22 19:20 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-2-22 20:33:11 | 显示全部楼层
帮楼主解决问题还让我学不到不少。我很少用到tab的。今天花了1个小时研究下,所以我很高兴的告诉楼主,问题解决了。这个代码兼容 ie6,ie7,ff2。

当然,我把你的代码做了修改。我认为这样比较有语义而已。不喜欢改回来把。楼主把代码放到本地去测试吧。论坛貌似有问题。

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 majer 于 2008-2-22 20:36 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-2-22 20:41:22 | 显示全部楼层
手册上讲是此属性作用于position的属性值为relative和absolute的对象...不过一般用z-index定义都是声明为absolute...也许是我孤陋寡闻.relative的z-index定义没见用的多少..

试着定义为absolute试试
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-22 21:24:54 | 显示全部楼层
majer  不对啊  IE6里 此时 和您修改前刚好反过来了  IE6不正常 出现了您修改前FF的不良外观...  FF反而正常了.................

您在item上加了 li  我原来也想过 本不想用li  想直接就上a标签 这样更省事些.........

谢谢啦  问题貌似还没解决的样子   我再看看...............

[[i] 本帖最后由 shanhero 于 2008-2-22 21:28 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-22 21:36:25 | 显示全部楼层
majer 的css里
  1. .item1, .item2, .item3 {
  2.    top: 26px !important; /* CSS Hack for FireFox */
  3.    *top: 25px !important; /* CSS Hack for IE 7 */
  4. }
复制代码

*top:25px!important;那 我把25改为了30就好了  
  1. .item1, .item2, .item3 {
  2.     top: 26px !important; /* CSS Hack for FireFox */
  3.    *top: 30px !important; /* CSS Hack for IE 7 */
  4. }
复制代码


以下是最重的效果但是我还想再试试去掉 li 直接上a标签.............)

 提示:您可以先修改部分代码再运行

回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-22 23:19:58 | 显示全部楼层
majer  看一下这里  下面是两个不同分辨率下的你给我的代码的差别  1024的我没有显示器去测........
我估计你电脑要不就是mac 要不就是宽屏显示器的......
都是在IE6下的

s.jpg

你的代码是挺不错的 思路很好  
用了absolute都会这样 当初我看到你代码时 还说25px不对 我这改为30px就好了
但是象这样的话 到底什么才能叫完美.....  

1400*1050的是14.1的笔记本(IBM的好像是14.1寸的吧?)
1440*900的是19寸宽屏显示器
1400*1050这个的图片更细腻 像素相对来说小 点距也小  所以才会出现大约5像素之差....

一个小小的选项卡 光光布局上就那么复杂... 比实现其动态效果的js还要复杂了....

不行 我一定要搞明白这个  趁现在有时间....

___________________________________________________________________________________

再看一下这个图:
s2.jpg
这个图是我的在FF下有问题的那个代码
在不同分辨率下是没有问题的

问题在哪里 就是在absolute那.........

(抱歉 majer 我把你给我的代码颜色改掉了)

[[i] 本帖最后由 shanhero 于 2008-2-23 00:17 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-23 00:24:13 | 显示全部楼层
头疼............

到底这个tab怎么写才是最完美的  我还是去看看前人们的例子吧.................................................
回复 支持 反对

使用道具 举报

发表于 2008-2-23 02:06:03 | 显示全部楼层
呵呵 赞下楼主的钻研精神~~~

俺要好好向你学习~
回复 支持 反对

使用道具 举报

发表于 2008-2-23 14:01:10 | 显示全部楼层
我是用1024*768的屏幕。如果真的分辨率会产生问题。我想把px换成其他的单位。

在本地测试的时候。效果是好的。也不知道是不是我ie6的问题,我用绿色版的ie6。ie7是主要的。其他都是兼容测试用的。。

我把我截的图发上来。图中看只有在opera9里有问题。

未标题-2.gif

机器的差异吧。所以。。还要研究。
回复 支持 反对

使用道具 举报

发表于 2008-2-23 17:29:42 | 显示全部楼层
唉 简单的写下不就好了.
look
http://www.bluekevin.com/blog/article.asp?id=71
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-23 21:28:14 | 显示全部楼层
楼上的貌似很不错的样子......

要不您把没有用图片的tab代码  贴出来给俺们看看  呵呵  感觉您还是蛮厉害的  还有要不您用jQuery来实现效果...... 不要用js.......

或者您还是帮我看一下 我那问题:  当 on 时  当前以外的两个content的border-top却被选项卡item给拦住了.......在FF下........

我的思路是这样的:  当 on 时  给item的样式使它能够 '浮' 起来.......  我就是不明白  在FF下为何就不行  FF下都不行 那还有什么意思....就不要干这行了.....

我怀疑我的思路是不是不对?

请赐教!

万分感谢!

[[i] 本帖最后由 shanhero 于 2008-2-23 21:32 编辑 ]
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-24 00:04:59 | 显示全部楼层
好了 我在一楼贴的代码的问题的原因 找到了 其实那些z-index一个都没必要加  还有就是最关键的一个属性---选项卡的背景颜色  我把背景颜色去掉之后  在FF里就好了

看这里http://timewilltell.cn/demo/jQueryDIY3/

这是修改后的那个样式:
  1. .btn a{ border-top:1px solid #ccc;border-right:2px solid #999;border-bottom:0px solid #777;border-left:1px solid #ccc;margin:0 2px;padding:5px 15px;text-decoration:none;   }
  2. /*背景颜色去掉之后立马在FF里就好了*/
复制代码


很奇怪 在Firebug里给.btn a添加上去一个bgcolor  就是坏的........background的默认属性是none  为何这里加个#fff都不行?

majer 你的代码不是没有错 但是在显示器兼容这方面  感觉实在是不太好  absolute 那个东西 也是很头疼 涉及到像素 点距的问题 用了absolute在分辨率兼容这方面 就会大打折扣 我不喜欢你的这个思路   太复杂了.....

bluekein 也很不错滴  但是用了图片  这个东西在CSS专业设计里是最忌讳的  能够用css写出来的东西 为何还要去加一个图片的URL呢?  虽然你的图片极小 但是代码移植性可修改性这两方面就很差了 你的js水平不错 至少比我高 我这段时间一直在搞这个jQuery  就因为它语义很强 不像纯纯的js 一般人看不明白  不过专业的还是js来写好一些 执行效率搞嘛 呵呵

感谢楼上各位

[[i] 本帖最后由 shanhero 于 2008-2-24 00:07 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2008-2-24 11:14:28 | 显示全部楼层
原帖由 [i]shanhero 于 2008-2-24 00:04 发表
好了 我在一楼贴的代码的问题的原因 找到了 其实那些z-index一个都没必要加  还有就是最关键的一个属性---选项卡的背景颜色  我把背景颜色去掉之后  在FF里就好了

看这里http://timewilltell.cn/demo/jQuer ...


看样子是被思想禁锢了。一提到要遮住什么,我就想到定位属性。

各个浏览器对定位属性解析差异,把握还是不容易。
回复 支持 反对

使用道具 举报

发表于 2008-8-1 15:28:14 | 显示全部楼层
顶一下!!!好定西!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-26 11:13 , Processed in 0.142220 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表