新书推介：《语义网技术体系》
作者：瞿裕忠，胡伟，程龚
   XML论坛     W3CHINA.ORG讨论区     计算机科学论坛     SOAChina论坛     Blog     开放翻译计划     新浪微博  
 
  • 首页
  • 登录
  • 注册
  • 软件下载
  • 资料下载
  • 核心成员
  • 帮助
    		•   Add to Google

    >> 讨论HTML、XHTML、Web2.0、Ajax、XUL, ExtJS, jQuery, JSON、Social Networking System(SNS)、Rich Internet Applications (RIA)、Tagging System、Taxonomy（tagsonomy,folkonomy）、XForms、XFrames、XInclude, XBL (XML Binding Language)等话题
    [返回] 中文XML论坛 - 专业的XML技术讨论区 → XML.ORG.CN讨论区 - XML技术 → 『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』 → DIV+背景图片的方式模拟选项卡遇到问题，请指教！ ◇查看新帖 ◇ 用户列表 ◇

      发表一个新主题  发表一个新投票  回复主题  (订阅本版) 您是本帖的第 10046 个阅读者浏览上一篇主题  刷新本主题   树形显示贴子　浏览下一篇主题
     * 贴子主题： DIV+背景图片的方式模拟选项卡遇到问题，请指教！ 举报  打印  推荐  IE收藏夹 
       本主题类别:     
     Qr 帅哥哟，离线，有人找我吗？
      
      
      威望：9
      等级：博士二年级(版主)
      文章：4392
      积分：29981
      门派：XML.ORG.CN
      注册：2004/5/15

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给Qr发送一个短消息 把Qr加入好友 查看Qr的个人资料 搜索Qr在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Qr的主页 引用回复这个贴子 回复这个贴子 查看Qr的博客楼主
    发贴心情 DIV+背景图片的方式模拟选项卡遇到问题，请指教！

    偶用一个DIV+背景图片并嵌套多个锚A的方式模拟选项卡，DIV的背景图片为选项卡的样式和状态(如下图)，然后通过JS动态设置CSS样式的方式来实现鼠标单击锚时，改变DIV的背景，以达到模拟选项卡的目的。

    此主题相关图片如下：
    按此在新窗口浏览图片

    document.getElementById("toolbar").style.backgroundImage = "url("+(pos+1)+".gif"+")";//pos+1是组合成的图片名
    代码非常的简单，但实际应用效果并不大好，因为偶尔背景图片没有显示，导致选项卡处一片空白，特别容易出现在机器配置比较低、系统资源被大量占用、网速不稳定的情况下。

    如果不改变DIV+背景图片的方式模拟选项卡，大家有什么好的意见和改进方法？


       收藏   分享  
    顶(0)
      




    ----------------------------------------------
    没人帮忙，那就靠自己，自己才是最好的老师！本人拒绝回答通过站内短消息提出的问题！

    blog:http://Qr.blogger.org.cn

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2007/6/23 18:09:00
     
     Qr 帅哥哟，离线，有人找我吗？
      
      
      威望：9
      等级：博士二年级(版主)
      文章：4392
      积分：29981
      门派：XML.ORG.CN
      注册：2004/5/15

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给Qr发送一个短消息 把Qr加入好友 查看Qr的个人资料 搜索Qr在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Qr的主页 引用回复这个贴子 回复这个贴子 查看Qr的博客第2楼
    发贴心情 
    看了几大网站的相关代码，似乎没有使用这种方式的，看来是偶晕了头了。
    不过没关系，找到了退而求其次的解决办法，就是：
    给这个DIV再嵌套一层DIV，将一个没有状态指示的选项卡图片作为其背景，这样就不会出现“空白”的状态，让用户因为找不到选项卡而措手不及了。

    ----------------------------------------------
    没人帮忙，那就靠自己，自己才是最好的老师！本人拒绝回答通过站内短消息提出的问题！

    blog:http://Qr.blogger.org.cn

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2007/7/4 8:39:00
     
     qxf24 帅哥哟，离线，有人找我吗？
      
      
      等级：大一新生
      文章：1
      积分：54
      门派：XML.ORG.CN
      注册：2009/1/21

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给qxf24发送一个短消息 把qxf24加入好友 查看qxf24的个人资料 搜索qxf24在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看qxf24的博客第3楼
    发贴心情 
    我有代码,选项卡的,呵呵
    QQ54435322
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2009/1/21 15:37:00
     
     Qr 帅哥哟，离线，有人找我吗？
      
      
      威望：9
      等级：博士二年级(版主)
      文章：4392
      积分：29981
      门派：XML.ORG.CN
      注册：2004/5/15

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给Qr发送一个短消息 把Qr加入好友 查看Qr的个人资料 搜索Qr在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Qr的主页 引用回复这个贴子 回复这个贴子 查看Qr的博客第4楼
    发贴心情 
    以下是引用qxf24在2009-1-21 15:37:00的发言：
    我有代码,选项卡的,呵呵
    QQ54435322


    谢谢了。
    都N年了，偶都写了好几个版本的了。

    ----------------------------------------------
    没人帮忙，那就靠自己，自己才是最好的老师！本人拒绝回答通过站内短消息提出的问题！

    blog:http://Qr.blogger.org.cn

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2009/1/21 16:15:00
     
     hexun831012 帅哥哟，离线，有人找我吗？天秤座1983-10-12
      
      
      威望：1
      等级：研二(Pi-Calculus看得一头雾水)(版主)
      文章：800
      积分：5114
      门派：XML.ORG.CN
      注册：2006/12/8

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给hexun831012发送一个短消息 把hexun831012加入好友 查看hexun831012的个人资料 搜索hexun831012在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看hexun831012的博客第5楼
    发贴心情 
    QR的问题，我不随便回答，呵呵
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2009/1/21 23:13:00
     
     Qr 帅哥哟，离线，有人找我吗？
      
      
      威望：9
      等级：博士二年级(版主)
      文章：4392
      积分：29981
      门派：XML.ORG.CN
      注册：2004/5/15

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给Qr发送一个短消息 把Qr加入好友 查看Qr的个人资料 搜索Qr在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Qr的主页 引用回复这个贴子 回复这个贴子 查看Qr的博客第6楼
    发贴心情 
    以下是引用hexun831012在2009-1-21 23:13:00的发言：
    QR的问题，我不随便回答，呵呵


    有时候人会陷入一种叫做思维定势的状态，这个时候就需要别人来提醒一下。

    ----------------------------------------------
    没人帮忙，那就靠自己，自己才是最好的老师！本人拒绝回答通过站内短消息提出的问题！

    blog:http://Qr.blogger.org.cn

    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2009/1/22 12:01:00
     
     hexun831012 帅哥哟，离线，有人找我吗？天秤座1983-10-12
      
      
      威望：1
      等级：研二(Pi-Calculus看得一头雾水)(版主)
      文章：800
      积分：5114
      门派：XML.ORG.CN
      注册：2006/12/8

    姓名：(无权查看)
    城市：(无权查看)
    院校：(无权查看)
    给hexun831012发送一个短消息 把hexun831012加入好友 查看hexun831012的个人资料 搜索hexun831012在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 引用回复这个贴子 回复这个贴子 查看hexun831012的博客第7楼
    发贴心情 
    以下是引用Qr在2009-1-22 12:01:00的发言：
    [quote]以下是引用hexun831012在2009-1-21 23:13:00的发言：
    QR的问题，我不随便回答，呵呵
    [/quote]
    有时候人会陷入一种叫做思维定势的状态，这个时候就需要别人来提醒一下。


    是啊，要不然QA就失业了
    点击查看用户来源及管理<br>发贴IP：*.*.*.* 2009/2/4 19:38:00
     
     GoogleAdSense天秤座1983-10-12
      
      
      等级：大一新生
      文章：1
      积分：50
      门派：无门无派
      院校：未填写
      注册：2007-01-01
    给Google AdSense发送一个短消息 把Google AdSense加入好友 查看Google AdSense的个人资料 搜索Google AdSense在『 HTML/XHTML/Ajax/Web 2.0/Web 3.0 』的所有贴子 访问Google AdSense的主页 引用回复这个贴子 回复这个贴子 查看Google AdSense的博客广告
    2025/7/18 23:00:54

    本主题贴数7，分页： [1]

    管理选项： 修改tag | 锁定 | 解锁 | 提升 | 删除 | 移动 | 固顶 | 总固顶 | 奖励 | 惩罚 | 发布公告
    W3C Contributing Supporter! W 3 C h i n a ( since 2003 ) 旗 下 站 点
    苏ICP备05006046号《全国人大常委会关于维护互联网安全的决定》《计算机信息网络国际联网安全保护管理办法》
    		 93.750ms