首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → tab选项卡显示个数不对

tab选项卡显示个数不对

时间：2009-11-13

来源：互联网

复制代码
  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>无标题文档</title>
  6. <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  7. <script type="text/javascript">
  8. jQuery(document).ready(function(){
  9. jQuery("#minus").mousedown(function(){
  10. jQuery("#inner").animate({left:jQuery("#inner").parent().offset().left-jQuery("#inner").width()}, { duration: "10000" });
  11. });
  12. jQuery("#minus").mouseup(function(){
  13. jQuery("#inner").stop();
  14. });
  15. jQuery("#plus").mousedown(function(){
  16. jQuery("#inner").animate({left:jQuery("#inner").parent().offset().left}, { duration: "10000" });
  17. });
  18. jQuery("#plus").mouseup(function(){
  19. jQuery("#inner").stop();
  20. });
  21. jQuery(".cls_tab_nav_li").click(function(){
  22. jQuery(".cls_tab_nav_li_first").removeClass("cls_tab_nav_li_first");
  23. jQuery(this).addClass("cls_tab_nav_li_first");
  24. });
  25. });
  26. </script>
  27. <style type="text/css">
  28. #tab_container1{width:600px;text-align:left;}
  29. .cls_tab_nav{height:26px;overflow:hidden;font-size:12px;text-align:left;background:url(http://www.codefans.net/jscss/demoimg/tabs/line_bg.jpg) repeat-x bottom;}
  30. #inner{ position:relative}
  31. .cls_tab_nav ul{font-size:9pt;margin:0;padding:0;}
  32. .cls_tab_nav_li{background:url(http://www.codefans.net/jscss/demoimg/tabs/tab_bg.jpg) no-repeat -157px 0;width:157px;height:26px;line-height:26px;float:left;display:inline;overflow:hidden;text-align:center;cursor:pointer;}
  33. .cls_tab_nav_li_first{background-position:0px 0px;}
  34. .cls_tab_nav_li a{text-decoration:none;color:#555;font-size:12px;}
  35. .cls_tab_body{border:1px solid #FFAE1E;border-top:none;min-height:260px;padding:20px;}
  36. .cls_div{display:none;font-size:14px;}
  37. .cls_tab_btn{ width:150px;float:left; margin-top:0px}
  38. </style>
  39. </head>
  40. <body>
  41. <div id="tab_container1">
  42. <div id="outer" class="cls_tab_nav">
  43. <div id="inner">
  44. <ul>
  45. <li class="cls_tab_nav_li cls_tab_nav_li_first">
  46. tab1
  47. </li>
  48. <li class="cls_tab_nav_li">
  49. tab2
  50. </li>
  51. <li class="cls_tab_nav_li">
  52. tab3
  53. </li>
  54. <li class="cls_tab_nav_li">
  55. tab4
  56. </li>
  57. <li class="cls_tab_nav_li">
  58. tab5
  59. </li>
  60. <li class="cls_tab_nav_li">
  61. tab6
  62. </li>
  63. </ul>
  64. </div>
  65. </div><div class="cls_tab_btn">
  66. <span><button id="minus">left</button><button id="plus">right</button></span></div></div>
  67. </body>
  68. </html>


如T，滑动效果可以，但是tab个数总是不对，如果超出div的部分就不显示。高手帮帮忙吧

作者: qict2004   发布时间: 2009-11-13

是width 没控制好
#tab_container1{}中的width只有600px;
而.cls_tab_nav_li{}中的width有157px;
div 引用上面的样式限制宽度为600px了，所以有的tab没显示出来

作者: ssss   发布时间: 2009-12-11

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net