效果体验：http://hovertree.com/texiao/js/3.htm

该效果使用纯JavaScript代码，实现TAB页切换效果，TAB标签根据内容自适应宽度，点击TAB标签切换内容页。

HTML文件代码：

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title>JS实现自适应宽度的Tag切换 - HoverTree</title><base target="_blank" />
  5. <style type="text/css">
  6. #hovertreecon {
  7. FONT-SIZE: 12px;
  8. MARGIN: 0px auto;
  9. WIDTH: 600px;
  10. }
  11.  
  12. #hovertreecon a {font-size:14px;line-height:20px;
  13. color:blue;text-decoration:none;}
  14.  
  15. #hovertreetags {
  16. PADDING-RIGHT: 0px;
  17. PADDING-LEFT: 0px;
  18. PADDING-BOTTOM: 0px;
  19. MARGIN: 0px 0px 0px 10px;
  20. WIDTH: 400px;
  21. PADDING-TOP: 0px;
  22. HEIGHT: 23px;
  23. }
  24.  
  25. #hovertreetags LI {
  26. BACKGROUND: url(http://hovertree.com/texiao/js/3/tagleft.gif) no-repeat left bottom;
  27. FLOAT: left;
  28. MARGIN-RIGHT: 1px;
  29. LIST-STYLE-TYPE: none;
  30. HEIGHT: 23px;
  31. }
  32.  
  33. #hovertreetags LI A {
  34. PADDING-RIGHT: 10px;
  35. PADDING-LEFT: 10px;
  36. BACKGROUND: url(http://hovertree.com/texiao/js/3/tagright.gif) no-repeat right bottom;
  37. FLOAT: left;
  38. PADDING-BOTTOM: 0px;
  39. COLOR: #999;
  40. LINE-HEIGHT: 23px;
  41. PADDING-TOP: 0px;
  42. HEIGHT: 23px;
  43. TEXT-DECORATION: none;
  44. }
  45.  
  46. #hovertreetags LI.emptyTag {
  47. BACKGROUND: none transparent scroll repeat 0% 0%;
  48. WIDTH: 4px;
  49. }
  50.  
  51. #hovertreetags LI.hovertreeSelectTag {
  52. BACKGROUND-POSITION: left top;
  53. MARGIN-BOTTOM: -2px;
  54. POSITION: relative;
  55. HEIGHT: 25px;
  56. }
  57.  
  58. #hovertreetags LI.hovertreeSelectTag A {
  59. BACKGROUND-POSITION: right top;
  60. COLOR: #000;
  61. LINE-HEIGHT: 25px;
  62. HEIGHT: 25px;
  63. }
  64.  
  65. #hovertreeContent {
  66. BORDER-RIGHT: #aecbd4 1px solid;
  67. PADDING-RIGHT: 1px;
  68. BORDER-TOP: #aecbd4 1px solid;
  69. PADDING-LEFT: 1px;
  70. PADDING-BOTTOM: 1px;
  71. BORDER-LEFT: #aecbd4 1px solid;
  72. PADDING-TOP: 1px;
  73. BORDER-BOTTOM: #aecbd4 1px solid;
  74. BACKGROUND-COLOR: #fff;
  75. }
  76.  
  77. #hovertreeContent DIV.hovertreeSelectTag {
  78. DISPLAY: block;
  79. }
  80.  
  81. .hovertreeTagContent {
  82. PADDING-RIGHT: 10px;
  83. DISPLAY: none;
  84. PADDING-LEFT: 10px;
  85. BACKGROUND: url(http://hovertree.com/texiao/js/3/bg.gif) repeat-x;
  86. PADDING-BOTTOM: 10px;
  87. WIDTH: 576px;
  88. COLOR: #474747;
  89. PADDING-TOP: 10px;
  90. HEIGHT: 250px;
  91. }
  92. </style>
  93. </head>
  94. <body>
  95. <div id="hovertreecon">
  96. <ul id="hovertreetags">
  97. <li>
  98. <a onclick="hovertreeSelectTag('hovertreeTagContent0',this)"
  99. href="javascript:void(0)">标签一</a>
  100. </li>
  101. <li class="hovertreeSelectTag">
  102. <a onclick="hovertreeSelectTag('hovertreeTagContent1',this)"
  103. href="javascript:void(0)">标签二</a>
  104. </li>
  105. <li>
  106. <a onclick="hovertreeSelectTag('hovertreeTagContent2',this)"
  107. href="javascript:void(0)">自适应宽度的标签</a>
  108. </li>
  109. </ul>
  110. <div id="hovertreeContent">
  111. <div class="hovertreeTagContent" id="hovertreeTagContent0">第一个标签的内容<br />
  112. <ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/nh0pk7kc.htm">网页顶部定时收起广告jQuery特效</a></li><li><a href="http://hovertree.com/hvtart/bjae/g71ha4qs.htm">简洁的HTML+CSS下拉菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/009i1gl6.htm">CSS带说明信息导航菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/5w5svpu4.htm">HoverTree带说明的CSS菜单</a></li><li><a href="http://hovertree.com/hvtart/bjae/f25wc8ik.htm">DIV和LI实现表格</a></li><li><a href="http://hovertree.com/hvtart/bjae/wucpcnjm.htm">JavaScript变换表格边框颜色</a></li><li><a href="http://hovertree.com/hvtart/bjae/ae553e2f1027d0ff.htm">使用jQuery改变链接的颜色</a></li><li><a href="http://hovertree.com/hvtart/bjae/74cc61ed089a2991.htm">jQuery图片列表鼠标经过遮罩显示文字</a></li><li><a href="http://hovertree.com/hvtart/bjae/48fa7b1b3162a7a4.htm">一个简单的移动端网页</a></li><li><a href="http://hovertree.com/hvtart/bjae/7f408b3a6bf8a433.htm">jQuery突出图片列表中鼠标经过项</a></li></ul>
  113. </div>
  114. <div class="hovertreeTagContent hovertreeSelectTag" id="hovertreeTagContent1">第二个标签的内容<br />
  115. <ul style="list-style:none;"><li><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">更多特效</a> <a href="http://hovertree.com/hvtart/bjae/wokffp10.htm">原文</a> <a href="http://hovertree.com/hvtart/bjae/1cijrgj1.htm">jQuery操作select</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6fd7e9e75b8773b.htm">jQ的css() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/47ce00836ac8b662.htm">jQuery的几个特点</a></li><li><a href="http://hovertree.com/hvtart/bjae/b6f6650a1b6ce369.htm">jQuery的发展和应用</a></li><li><a href="http://hovertree.com/hvtart/bjae/a3fc809e13e1157e.htm">jquery通过HTML标签实现控件隐藏</a></li><li><a href="http://hovertree.com/hvtart/bjae/5aac47a87eb2a3c2.htm">盘点jQuery弃用的函数</a></li><li><a href="http://hovertree.com/hvtart/bjae/c5a746a2d25d43b7.htm">jQuery 属性操作 - attr() 方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/e367418912caa0b8.htm">JQuery实现锚点平滑滚动</a></li><li><a href="http://hovertree.com/hvtart/bjae/e23e16b491f3cae2.htm">关于Jquery中的$.each获取各种返回类型数据的使用方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/fa1cb9dc2e859da8.htm">jQuery使用的8个经验技巧</a></li></ul>
  116. </div>
  117. <div class="hovertreeTagContent" id="hovertreeTagContent2">第三个标签的内容
  118. <br />
  119. <ul style="list-style:none;"><li><a href="http://hovertree.com/hvtart/bjae/bvnsa1gk.htm">div标签嵌套浮动div标签时无法撑开外部div的解决办法</a></li><li><a href="http://hovertree.com/hvtart/bjae/kl77symv.htm">web前端开发之编写高质量代码</a></li><li><a href="http://hovertree.com/hvtart/bjae/nf4w1l0h.htm">3个有用的css小知识</a></li><li><a href="http://hovertree.com/hvtart/bjae/ia0qi2nv.htm">用CSS设置Table的细边框的最好用的方法</a></li><li><a href="http://hovertree.com/hvtart/bjae/usi4p1v9.htm">如何利用CSS中的ime-mode用来控制页面上文本框中的全角/半角输入</a></li><li><a href="http://hovertree.com/hvtart/bjae/j2w0mylg.htm">CSS选择器介绍</a></li><li><a href="http://hovertree.com/hvtart/bjae/isnqi1t4.htm"> Css中的两个重要概念：块状元素和内联元素</a></li><li><a href="http://hovertree.com/hvtart/bjae/v8e7w4u1.htm">伪类link,hover,active,visited,focus的区别</a></li><li><a href="http://hovertree.com/hvtart/bjae/alaxpy6v.htm">实例看padding与margin的区别</a></li><li><a href="http://hovertree.com/hvtart/bjae/4a41528072f21543.htm">div+css页面居中代码</a></li></ul>
  120.  
  121. </div>
  122. </div>
  123. </div>
  124.  
  125. <script>
  126. function hovertreeSelectTag(showContent, selfObj) {
  127. // 操作标签
  128. var tag = document.getElementById("hovertreetags").getElementsByTagName("li");
  129. var taglength = tag.length;
  130. for (i = 0; i < taglength; i++) {
  131. tag[i].className = "";
  132. }
  133. selfObj.parentNode.className = "hovertreeSelectTag";
  134. // 操作内容
  135. for (i = 0; j = document.getElementById("hovertreeTagContent" + i) ; i++) {
  136. j.style.display = "none";
  137. }
  138. document.getElementById(showContent).style.display = "block";
  139. }
  140. </script>
  141. </body>
  142. </html>

web前端汇总：http://www.cnblogs.com/jihua/p/webfront.html

JS实现自适应宽度的Tag切换的更多相关文章

  1. UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案

    UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...

  2. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  3. 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--

    一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...

  4. 从三栏自适应宽度布局到css布局的讨论

    如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...

  5. RelativeLayout中的格局，自适应宽度布局

    RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...

  6. Qt的tablewidget行列头自适应宽度

    Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下:   1. 使用horizontalHeader()->setRe ...

  7. Midnight.js – 实现奇妙的固定头部切换效果

    Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...

  8. [Winform]DataGridView列自适应宽度

    引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...

  9. ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）

    PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...

随机推荐

  1. easyui 数据库修改部分（基于数据添加逻辑功能修改）

    {iconCls:'icon-edit',text:'修改', handler:function(){ type="edit"; //判断是否选中一条数据 var data = $ ...

  2. TSql 巧用Alt 键

    1,查看表的信息 在TSql 编辑器中,选中一个表,如图 点击Alt+F1,就可以查看表的属性定义 2,使用alt批量插入逗号 在Tsql中使用 in 子句,在(value_List)列表中,经常有很 ...

  3. bootstrap-modal 学习笔记 源码分析

    Bootstrap是Twitter推出的一个开源的用于前端开发的工具包,怎么用直接官网 http://twitter.github.io/bootstrap/ 我博客的定位就是把这些年看过的源码给慢慢 ...

  4. exe4j的使用

    下载:http://download.cnet.com/exe4j/3000-2070_4-144405.html 参考:http://blog.chinaunix.net/uid-25749806- ...

  5. Android标题栏最右边添加按钮

    step1:重写activity的onCreateOptionsMenu方法 @Override public boolean onCreateOptionsMenu(Menu menu){ Menu ...

  6. iOS开发之多表视图滑动切换示例（仿"头条"客户端）---优化篇

    前几天发布了一篇iOS开发之多表视图滑动切换示例(仿"头条"客户端)的博客,之所以写这篇博客,是因为一位iOS初学者提了一个问题,简单的写了个demo做了个示范,让其在基础上做扩展 ...

  7. C# 在word中查找及替换文本

    C# 在word中查找及替换文本 在处理word文档时,很多人都会用到查找和替换功能.尤其是在处理庞大的word文档的时候,Microsoft word的查找替换功能就变得尤为重要,它不仅能让我们轻易 ...

  8. C语言 第五章 循环结构

    一.for 请在屏幕上输出1000个*号 printf("*************************...."); #include "stdio.h" ...

  9. 1Z0-053 争议题目解析686

    1Z0-053 争议题目解析686 考试科目:1Z0-053 题库版本:V13.02 题库中原题为: 686.You execute the following FLASHBACK TABLE com ...

  10. hibernate笔记--cascade级联以及inverse属性

    cascade : 不管是单向多对一还是一对多,或者是双向的一对多关系,在一的一端映射文件中有一个set标签,在多的一端有many-to-one标签,拿前几篇笔记里讲的Grade和Student举例, ...