将两个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 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
javascript中AJAX用法实例分析
Jan 30 Javascript
jquery实现加载进度条提示效果
Nov 23 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
老生常谈javascript的类型转换
Oct 12 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
JavaScript ES6 Class类实现原理详解
May 08 Javascript
Vue+Vant 图片上传加显示的案例
Nov 03 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 cookies中删除的一般赋值方法
2011/05/07 PHP
php统计时间和内存使用情况示例分享
2014/03/13 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
用户注册常用javascript代码
2009/08/29 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
vue的props实现子组件随父组件一起变化
2016/10/27 Javascript
js仿QQ邮箱收件人选择与搜索功能
2017/02/10 Javascript
jQuery图片切换动画效果
2017/02/28 Javascript
vue2.0获取自定义属性的值
2017/03/28 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
去掉vue 中的代码规范检测两种方法(Eslint验证)
2018/03/21 Javascript
小程序实现订单倒计时功能
2019/04/23 Javascript
Vue表单控件数据绑定方法详解
2020/02/05 Javascript
JavaScript运动原理基础知识详解
2020/04/02 Javascript
python删除列表中重复记录的方法
2015/04/28 Python
Pycharm学习教程(7)虚拟机VM的配置教程
2017/05/04 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
python 列表降维的实例讲解
2018/06/28 Python
代码实例讲解python3的编码问题
2019/07/08 Python
Windows下Anaconda安装、换源与更新的方法
2020/04/17 Python
Python代码需要缩进吗
2020/07/01 Python
css3学习心得分享
2013/08/19 HTML / CSS
英国二手物品交易网站:Preloved
2017/10/06 全球购物
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
在SQL Server中创建数据库主要有那种方式
2013/09/10 面试题
WEB控件可以激发服务端事件,请谈谈服务端事件是怎么发生并解释其原理?自动传回是什么?为什么要使用自动传回?
2012/02/21 面试题
幼儿园教师工作感言
2014/02/15 职场文书
技术员岗位职责
2015/02/04 职场文书
2015新学期开学寄语
2015/02/26 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书
Hive日期格式转换方法总结
2022/06/25 数据库