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

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

HTML文件代码：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>JS实现自适应宽度的Tag切换 - HoverTree</title><base target="_blank" />

<style type="text/css">

#hovertreecon {

FONT-SIZE: 12px;

MARGIN: 0px auto;

WIDTH: 600px;

}

#hovertreecon a {font-size:14px;line-height:20px;

color:blue;text-decoration:none;}

#hovertreetags {

PADDING-RIGHT: 0px;

PADDING-LEFT: 0px;

PADDING-BOTTOM: 0px;

MARGIN: 0px 0px 0px 10px;

WIDTH: 400px;

PADDING-TOP: 0px;

HEIGHT: 23px;

}

#hovertreetags LI {

BACKGROUND: url(http://hovertree.com/texiao/js/3/tagleft.gif) no-repeat left bottom;

FLOAT: left;

MARGIN-RIGHT: 1px;

LIST-STYLE-TYPE: none;

HEIGHT: 23px;

}

#hovertreetags LI A {

PADDING-RIGHT: 10px;

PADDING-LEFT: 10px;

BACKGROUND: url(http://hovertree.com/texiao/js/3/tagright.gif) no-repeat right bottom;

FLOAT: left;

PADDING-BOTTOM: 0px;

COLOR: #999;

LINE-HEIGHT: 23px;

PADDING-TOP: 0px;

HEIGHT: 23px;

TEXT-DECORATION: none;

}

#hovertreetags LI.emptyTag {

BACKGROUND: none transparent scroll repeat 0% 0%;

WIDTH: 4px;

}

#hovertreetags LI.hovertreeSelectTag {

BACKGROUND-POSITION: left top;

MARGIN-BOTTOM: -2px;

POSITION: relative;

HEIGHT: 25px;

}

#hovertreetags LI.hovertreeSelectTag A {

BACKGROUND-POSITION: right top;

COLOR: #000;

LINE-HEIGHT: 25px;

HEIGHT: 25px;

}

#hovertreeContent {

BORDER-RIGHT: #aecbd4 1px solid;

PADDING-RIGHT: 1px;

BORDER-TOP: #aecbd4 1px solid;

PADDING-LEFT: 1px;

PADDING-BOTTOM: 1px;

BORDER-LEFT: #aecbd4 1px solid;

PADDING-TOP: 1px;

BORDER-BOTTOM: #aecbd4 1px solid;

BACKGROUND-COLOR: #fff;

}

#hovertreeContent DIV.hovertreeSelectTag {

DISPLAY: block;

}

.hovertreeTagContent {

PADDING-RIGHT: 10px;

DISPLAY: none;

PADDING-LEFT: 10px;

BACKGROUND: url(http://hovertree.com/texiao/js/3/bg.gif) repeat-x;

PADDING-BOTTOM: 10px;

WIDTH: 576px;

COLOR: #474747;

PADDING-TOP: 10px;

HEIGHT: 250px;

}

</style>

</head>

<body>

<div id="hovertreecon">

<ul id="hovertreetags">

<li>

<a onclick="hovertreeSelectTag('hovertreeTagContent0',this)"

href="javascript:void(0)">标签一</a>

</li>

<li class="hovertreeSelectTag">

<a onclick="hovertreeSelectTag('hovertreeTagContent1',this)"

href="javascript:void(0)">标签二</a>

</li>

<li>

<a onclick="hovertreeSelectTag('hovertreeTagContent2',this)"

href="javascript:void(0)">自适应宽度的标签</a>

</li>

</ul>

<div id="hovertreeContent">

<div class="hovertreeTagContent" id="hovertreeTagContent0">第一个标签的内容<br />

<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>

</div>

<div class="hovertreeTagContent hovertreeSelectTag" id="hovertreeTagContent1">第二个标签的内容<br />

<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>

</div>

<div class="hovertreeTagContent" id="hovertreeTagContent2">第三个标签的内容

<br />

<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>

</div>

</div>

</div>

<script>

function hovertreeSelectTag(showContent, selfObj) {

// 操作标签

var tag = document.getElementById("hovertreetags").getElementsByTagName("li");

var taglength = tag.length;

for (i = 0; i < taglength; i++) {

tag[i].className = "";

}

selfObj.parentNode.className = "hovertreeSelectTag";

// 操作内容

for (i = 0; j = document.getElementById("hovertreeTagContent" + i) ; i++) {

j.style.display = "none";

}

document.getElementById(showContent).style.display = "block";

}

</script>

</body>

</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. ionic中关于ionicView 的生命周期

    当我们来回切换页面时候,视图被缓存下来,不用每次再去new一个新的视图,可以大大地提高性能.当跳出一个视图后,视图的元素被保存在DOM中,它的作用域也就不在$watch的作用域内,当我们访问一个已经被 ...

  2. ArchLinux+Win10双系统的Grub配置

    解决:ArchLinux+Win10双系统,Grub设置 原装的Win10,装完ArchLinux后,要进入Win10一段时间只能通过boot选择. Grub的菜单里并没有.Grub安装过程是参考wi ...

  3. 把w3schools英文版的所有属性扒下来了，免费分享。

    为了方便查手册等,把w3schools上的所以属性弄成json版的了,到时候再修改一下,查起来就比较方便了,这里免费分享一下.一共为两份,一份为选择器部分,还有一部分是属性. 选择器部分json 属性 ...

  4. webpack + vuejs 基本配置（一）

    开始之前 本文包含以下技术,文中尽量给与详细的描述,并且附上参考链接,读者可以深入学习: 1.webpack2.Vue.js3.npm4.nodejs —- 这个就不给连接了,因为上面的连接都是在你实 ...

  5. sizzle分析记录：关于querySelectorAll兼容问题

    querySelector和querySelectorAll是W3C提供的新的查询接口 目前几乎主流浏览器均支持了他们.包括 IE8(含) 以上版本. Firefox. Chrome.Safari.O ...

  6. Android 裁剪图片为圆形图片

    转自http://blog.csdn.net/kkmike999/article/details/16359713 /** * 转换图片成圆形 * * @param bitmap * 传入Bitmap ...

  7. Android 生成LayoutInflater的三种方式

    通俗的说,inflate就相当于将一个xml中定义的布局找出来. 因为在一个Activity里如果直接用findViewById()的话,对应的是setConentView()的那个layout里的组 ...

  8. 编写简单的ramdisk（有请求队列）

    前言 前面用无请求队列实现的ramdisk的驱动程序虽然申请了请求队列,但实际上没用上,因为ramdisk不像实际的磁盘访问速度慢需要缓存,ramdisk之间使用内存空间,所以就没用请求队列了.本文将 ...

  9. Java操作Sqlite数据库-jdbc连接

    Java操作Sqlite数据库步骤: 1. 导入Sqlite jdbc 本文使用sqlite-jdbc-3.7.2.jar,下载地址 http://pan.baidu.com/s/1kVHAGdD 2 ...

  10. 代码的坏味道（3）——基本类型偏执(Primitive Obsession)

    坏味道--基本类型偏执(Primitive Obsession) 特征 使用基本类型而不是小对象来实现简单任务(例如货币.范围.电话号码字符串等). 使用常量编码信息(例如一个用于引用管理员权限的常量 ...