将两个div左右并列显示并实现点击标题切换内容


Posted in Javascript onOctober 22, 2013
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN" xml:lang="zh-CN"> 
<head> 
<title>选项卡</title> 
<style type="text/css"> 
<!-- 
* { margin:0; padding:0; font-size:12px; font-weight:normal; } 
.jj { font-weight:bolder!important; } 
.box { border-top-color:#c00!important; } 
.pr { color:#060!important; } 
#tab01 { position:relative; width:336px; height:88px; padding-top:15px; margin:50px; overflow:hidden; } 
#tab01 h3 { position:relative; z-index:2; float:left; height:14px; padding:0 7px 0 8px; margin-left:-1px; border-left:solid 1px #ccc; border-right:solid 1px #fff; text-align:center; background:#fff; cursor:pointer; } 
#tab01 h3.up { height:18px; padding:5px 7px 0 7px; margin:-6px 0 0 0; border:solid #ccc; border-width:1px 1px 0; color:#c00; } 
#tab01 div { display:none; position:absolute; left:0; top:32px; z-index:1; width:324px; height:54px; padding:5px; border:solid 1px #ccc; color:#666; } 
#tab01 div.up { display:block; } 
#tab02 { position:relative; width:200px; margin:50px; border:solid #ccc; border-width:0 1px 1px; } 
#tab02 h4 { height:18px; line-height:18px; border:solid #ccc; border-width:1px 0; margin-bottom:-1px; text-align:center; background:#f6f6f6; cursor:pointer; } 
#tab02 h4.up { color:#c00; } 
#tab02 ol { display:none; height:54px; padding:5px; color:#666; } 
#tab02 ol.up { display:block; } 
#tab03 { position:relative; width:100px; margin:50px; } 
#tab03 h3 { position:relative; z-index:1; height:16px; padding-top:4px; margin-bottom:-1px; border:solid #ccc; border-width:1px 0 1px 1px; text-align:center; font-family:宋体; background:#eee; cursor:pointer; } 
#tab03 h3.up { z-index:3; color:#c00; background:#fff; } 
#tab03 div.tab { display:none; position:absolute; left:99px; top:0; z-index:2; width:300px; height:200px; padding:5px; border:solid 1px #ccc; color:#666; } 
#tab03 div.tab.up { display:block; } 
--> 
</style> 
</head> 
<body> 
<div id="tab01"> 
<h3>首页</h3> 
<div class="jj"><p>嘿嘿,无视div原始class值。</p></div> 
<h3 class="pr">测试</h3> 
<div><p>继续无视h3原始class值。</p></div> 
<h3>无聊</h3> 
<div><p>h3没有值也可以~</p></div> 
<h3 class="box">傻蛋</h3> 
<div><p>div没有值一样可以~</p></div> 
</div> 
<div id="tab02"> 
<h4>首页</h4> 
<ol class="pr"><li>嘿嘿,无视容器原始class值。</li></ol> 
<h4 class="box">测试</h4> 
<ol><li>继续无视h3原始class值。</li></ol> 
<h4>无聊</h4> 
<ol><li>h3没有值也可以~</li></ol> 
<h4 class="bb">傻蛋</h4> 
<ol><li>div没有值一样可以~</li></ol> 
</div> 
<div id="tab03"> 
<h3>首页</h3> 
<div class="tab"><p>嘿嘿,无视h3原始class值。</p></div> 
<h3>测试</h3> 
<div class="tab wushi"><p>继续无视div原始class值。</p></div> 
<h3>无聊</h3> 
<div class="tab"><p>h3没有值也可以~</p></div> 
<h3 class="box">傻蛋</h3> 
<div class="tab tab123"><p>class值相似一样也可以~</p><div><p>指定class后,即时再多一个div也行。</p></div></div> 
</div> 
<script type="text/javascript"> 
<!-- 
function Pid(id,tag){ 
if(!tag){ 
return document.getElementById(id); 
} 
else{ 
return document.getElementById(id).getElementsByTagName(tag); 
} 
} function tab(id,hx,box,iClass,s,pr){ 
var hxs=Pid(id,hx); 
var boxs=Pid(id,box); 
if(!iClass){ // 如果不指定class,则: 
boxsClass=boxs; // 直接使用box作为容器 
} 
else{ // 如果指定class,则: 
var boxsClass = []; 
for(i=0;i<boxs.length;i++){ 
if(boxs[i].className.match(/\btab\b/)){// 判断容器的class匹配 
boxsClass.push(boxs[i]); 
} 
} 
} 
if(!pr){ // 如果不指定预展开容器,则: 
go_to(0); // 默认展开序列 
yy(); 
} 
else { 
go_to(pr); 
yy(); 
} 
function yy(){ 
for(var i=0;i<hxs.length;i++){ 
hxs[i].temp=i; 
if(!s){// 如果不指定事件,则: 
s="onmouseover"; // 使用默认事件 
hxs[i][s]=function(){ 
go_to(this.temp); 
} 
} 
else{ 
hxs[i][s]=function(){ 
go_to(this.temp); 
} 
} 
} 
} 
function go_to(pr){ 
for(var i=0;i<hxs.length;i++){ 
if(!hxs[i].tmpClass){ 
hxs[i].tmpClass=hxs[i].className+=" "; 
boxsClass[i].tmpClass=boxsClass[i].className+=" "; 
} 
if(pr==i){ 
hxs[i].className+=" up"; // 展开状态:标题 
boxsClass[i].className+=" up"; // 展开状态:容器 
} 
else { 
hxs[i].className=hxs[i].tmpClass; 
boxsClass[i].className=boxsClass[i].tmpClass; 
} 
} 
} 
} 
tab("tab01","h3","div","","onclick",2); tab("tab02","h4","ol");tab("tab03","h3","div","tab"); 
//--> 
</script> 
</body> 
</html>
Javascript 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
JavaScript Eval 函数使用
Mar 23 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
浅谈JavaScript函数节流
Dec 09 Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 Javascript
JS实现支持多选的遍历下拉列表代码
Aug 20 Javascript
jquery动态切换背景图片的简单实现方法
May 14 Javascript
node网页分段渲染详解
Sep 05 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
nginx配置域名后的二级目录访问不同项目的配置操作
Nov 06 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 #Javascript
js单例模式的两种方案
Oct 22 #Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 #Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 #Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 #Javascript
用js的for循环获取radio选中的值
Oct 21 #Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 #Javascript
You might like
使用PHP制作新闻系统的思路
2006/10/09 PHP
php学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
探讨GDFONTPATH能否被winxp下的php支持
2013/06/21 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
javascript 函数声明与函数表达式的区别介绍
2013/10/05 Javascript
防止jQuery ajax Load使用缓存的方法小结
2014/02/22 Javascript
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
简单纯js实现点击切换TAB标签实例
2015/08/23 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
在vue项目中引入高德地图及其UI组件的方法
2018/09/04 Javascript
vue实现将一个数组内的相同数据进行合并
2019/11/07 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Python中的rjust()方法使用详解
2015/05/19 Python
Python列表切片用法示例
2017/04/19 Python
Python 2.x如何设置命令执行的超时时间实例
2017/10/19 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
python文件排序的方法总结
2020/09/13 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
医药代表个人的求职信分享
2013/12/08 职场文书
《小石潭记》教学反思
2014/02/13 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
小学二年级评语
2014/04/21 职场文书
运动会班级口号
2014/06/09 职场文书
标准单位租车协议书
2014/09/23 职场文书
个人年底工作总结
2015/03/10 职场文书
公司人事任命通知
2015/04/20 职场文书
图神经网络GNN算法
2022/05/11 Python