JS实现自适应宽度的Tag切换
效果体验：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切换的更多相关文章
- UEditor百度富文本编辑器--让编辑器自适应宽度的解决方案
UEditor百度富文本编辑器的initialFrameWidth属性,默认值是1000. 不能够自适应屏幕宽度.如图1: 刚开始的时候,我是直接设置initialFrameWidth=null的.效 ...
- 基于jQuery自适应宽度跟高度可自定义焦点图
基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <section cl ...
- 关于ie6中绝对定位或浮动的div中既有向左float也有向右float时候如何让外层div自适应宽度的解决方案--
一个详细的说明请见: http://www.cnblogs.com/yiyang/p/3265006.html 我的问题大约为,如下代码: <!DOCTYPE html PUBLIC " ...
- 从三栏自适应宽度布局到css布局的讨论
如何实现一个三栏自适应布局,左右各100px,中间随着浏览器宽度自适应? 第一个想到的是使用table布局,设置table的宽度为100%,三个td,第1个和第3个固定宽度为100px,那么中间那个就 ...
- RelativeLayout中的格局，自适应宽度布局
RelativeLayout中的布局,自适应宽度布局 该图片中为android布局:总布局为 RelativeLayoutAtLeft 为居左 <TextView android:backgro ...
- Qt的tablewidget行列头自适应宽度
Qt构造一个TableWidget后,窗口最大化后,列头默认不能自适应宽度,研究了一下,Qt提供了两种方式来处理这个问题,如下: 1. 使用horizontalHeader()->setRe ...
- Midnight.js – 实现奇妙的固定头部切换效果
Midnight.js 是一款 jQuery 插件,在页面滚动的时候实现多个头设计之间的切换,所以你总是有一个头与它下面的内容层叠,看起来效果很不错. Midnight.js 可以让你轻松实现这种切换 ...
- [Winform]DataGridView列自适应宽度
引言 在做winform项目中,数据控件DataGridView的使用多多少少是会用到的,如果不设置它的属性,默认情况下是不会自适应宽度的,你想查看某项的数据,就不得不将标题栏拖来拖去,挺烦的. 方法 ...
- ASP.NET实例——漂亮的自适应宽度的导航条（仿Discuz!）
PHP比较成熟的开放的源代码比较多,比方说PrestaShop,比方说Discuz!...... 虽然语言不同,但基本原理是一样的,有时间的话读一读,对学习ASP.NET应该是非常有好处的(唉,什么时 ...
随机推荐
- iOS 之APP上架
前几天在忙着上线,尽管之前已经上线过一次,但由于本身比较菜,还是状况百出. 好在今天终于成功提交,因此来写写心得. 如果是第一次上线,推荐这篇文章: http://jingyan.baidu.com/ ...
- for循环或Repeat里面对某个字段进行复杂处理的解决方案
在后台用一个方法处理
- SQL Server 通过备份文件初始化复制
一.本文所涉及的内容(Contents) 本文所涉及的内容(Contents) 背景(Contexts) 搭建过程(Process) 注意事项(Attention) 疑问(Questions) 参考文 ...
- javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
- 在 ML2 中配置 Vlan Network- 每天5分钟玩转 OpenStack（93）
上一节我们学习了 Neutron Vlan Network 的原理,今天讨论如何在 ML2 配置中 enable 它. 首先在 /etc/neutron/plugins/ml2/ml2_conf.in ...
- Rust初步（二）：使用Visual Studio Code编写Rust程序（猜猜看游戏）
我是照着下面这篇帮助文档,完成了第一个完整的Rust程序: 猜猜看 游戏 http://kaisery.gitbooks.io/rust-book-chinese/content/content/3. ...
- weight属性你用的真的6嘛？
相信大家在日常开发中一定使用过weight这个属性,它的作用一个是权重,另一个就是渲染优先级,但是你真的能很6的使用它嘛?如果不是,那么请继续往下看!!! 我们知道,当weight起到不同作用的时候, ...
- C++基础知识
基础知识 &&和||具有"短路"特性,特别是在第二个操作数有++或--时要注意. 显式类型转换 (类型说明符)表达式 //C风格的 类型说明符(表达式) //cpp ...
- IO多路复用之epoll总结
1.基本知识 epoll是在2.6内核中提出的,是之前的select和poll的增强版本.相对于select和poll来说,epoll更加灵活,没有描述符限制.epoll使用一个文件描述符管理多个描述 ...
- C#基础知识五之abstract virtual关键字
abstract 用关键字abstract修饰的类叫做抽象类,且只能作为基类,也不能实例化. 用abstract定义的抽象类中不一定只包含抽象方法 ,可以包含非抽象方法. abstract定义的方法一 ...