将两个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 相关文章推荐
关于javascript DOM事件模型的两件事
Jul 22 Javascript
JavaScript 图像动画的小demo
May 23 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
js控制页面的全屏展示和退出全屏显示的方法
Mar 10 Javascript
Node.js与Sails ~项目结构与Mvc实现及日志机制
Oct 14 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
javascript算法之二叉搜索树的示例代码
Sep 12 Javascript
JS数组去重常用方法实例小结【4种方法】
May 28 Javascript
命令行批量截图Node脚本示例代码
Jan 25 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 Javascript
js中switch语句的学习笔记
Mar 25 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模板函数 正则实现代码
2012/10/15 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
yii2中关于加密解密的那些事儿
2018/06/12 PHP
PHP实用小技巧之调用录像的方法
2019/12/05 PHP
认识延迟时间为0的setTimeout
2008/05/16 Javascript
JavaScript 函数调用规则
2009/09/14 Javascript
js封装的textarea操作方法集合(兼容很好)
2010/11/16 Javascript
子页向父页传值示例
2013/11/27 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
JS绘图Flot如何实现动态可刷新曲线图
2020/10/16 Javascript
express异步函数异常捕获示例详解
2020/11/30 Javascript
[37:45]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS Orenda
2014/05/22 DOTA
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
python保存数据到本地文件的方法
2018/06/23 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
OpenCV 边缘检测
2019/07/10 Python
numpy数组广播的机制
2019/07/12 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
物流仓储计划书
2014/01/10 职场文书
感恩教育活动总结
2014/05/05 职场文书
走进敬老院活动总结
2014/07/10 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
考试没考好检讨书
2015/05/06 职场文书
2019年作为一名实习生的述职报告
2019/09/29 职场文书
MySQL表锁、行锁、排它锁及共享锁的使用详解
2022/04/02 MySQL
Python读取和写入Excel数据
2022/04/20 Python
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
Mybatis-plus配置分页插件返回统一结果集
2022/06/21 Java/Android