- 浏览: 35047 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
charrys:
呵自己跟自己留言
JS可以控制样式的名称写法 -
charrys:
自己顶下
我的json获取数据实例,直接运行就可以看到了
注意的是a的里面的rel属性window.onload事件!在一个页面可以添加多个这样的效果,只需要在 onload事件添加就可以了。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <mce:style><!-- *{margin:0;padding:0;} .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} .clearfix{display:inline-block;} .clearfix {display:block;} ul{margin:10px 10px 0;} ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom} ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;} ul li .crent{background:#fff;color:#f60;} p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;} --></mce:style><style mce_bogus="1"> *{margin:0;padding:0;} .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden;} *html .clearfix{height:1%;} *+html .clearfix{height:1%;} .clearfix{display:inline-block;} .clearfix {display:block;} ul{margin:10px 10px 0;} ul li{background:#ddd; list-style:none;padding-top:5px; vertical-align:bottom} ul li a{padding:5px 10px;margin-left:5px;text-decoration:none;font-size:12px;color:#000;float:left;} ul li .crent{background:#fff;color:#f60;} p{display:none;border:1px solid #ddd;border-top:none;margin:0 10px 10px;padding:5px;}</style> <title>Example</title> <mce:script type="text/javascript"><!-- function $(objID){ return "string" == typeof(objID) ? document.getElementById(objID) : objID; } function addEvt(tab,ct){ var ctab = $(tab).getElementsByTagName("a"); var cdiv = $(ct).getElementsByTagName("p"); for(var i = 0;i<ctab.length;i++) { ctab[i].onclick =function std(){ for(var i = 0;i<ctab.length;i++){ if(i!=parseInt(this.rel-1)) { ctab[i].className=""; cdiv[i].style.display="none"; } } ctab[parseInt(this.rel)-1].className="crent"; cdiv[parseInt(this.rel)-1].style.display="block"; } } } window.onload=function(){ addEvt("tab","ct"); addEvt("tab2","ct2"); } // --></mce:script> </head> <body> <div id="all1"> <ul class="ul_bigspace" id="tab"> <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li> </ul> <div id="ct"> <p style="display:block;" mce_style="display:block;">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </div> <br> <ul class="ul_bigspace" id="tab2"> <li class="clearfix"><a href="#" mce_href="#" class="crent" rel="1">平面设计</a><a href="#" mce_href="#" rel="2">包装设计</a><a href="#" mce_href="#" rel="3">影视广告片</a><a href="#" mce_href="#" rel="4">媒介资源</a><a href="#" mce_href="#" rel="5">网站设计</a><a href="#" mce_href="#" rel="6">网站设计</a></li> </ul> <div id="ct2"> <p style="display:block;" mce_style="display:block;">1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> </div> </div> </body> </html>
可直接在http://www.ok22.org/art_detail.aspx?id=64 运行查看效果
发表评论
-
我的json获取数据实例,直接运行就可以看到了
2011-04-18 10:36 1273开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1283一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 1962编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1357iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 765直接贴代码了!(来自:http://www.ok22.org/ ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1529js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1753我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1292看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2229方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 843前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 988盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1732前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1187iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1065关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 774当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的 今天无聊,...
一个非常不错的原生qq在线客服代码,多出的点击按钮可以实时隐藏,效果很不错,内部支持tab标签切换。 ... 1、在网页head中引入css以及两个js文件即可 2、将代码部分拷贝到你的网页body结束前。
+为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
+为所有Panel(包括Grid,Tree,Form等)增加枚举类型Icon,其中包含1700多个小图标。 -如果Panel具有IconUrl属性,则IconUrl优先于Icon。 -所有Icon的列表在icon.aspx。 -为Button,MenuItem(MenuButton,...
6.16 在两个Tab标签之间进行元素拖动 6.17 拖动表格选择多行数据 6.18 拖动表格时自动选中复选框 6.19 拖动表格行并放置到目标位置 6.20 表格的拖动排序 6.21 拖动调整控件的大小 6.22 调整控件大小时设置调整约束 ...
Django获取多个数据以及文件上传 Django的CBV和FBV Django模板语言循环字典 Django基于正则表达式的URL Django对应的路由名称 Django路由分发 DjangoORM基本创建基本类型以及生成数据库结构 DjangoORM使用mysql注意 ...
要解决两个需求: 一个是从A页面跳到B页面,滚动到页面的任何地方; 第二个是在B页面内部点击某个元素,滚动到页面的任何地方; 怎么解决啊?很简单,当然是用锚点。 首先在A页面创建一个锚点 <body> 点击跳转...
9、 锁屏的时候屏蔽了键盘操作刷新、Tab切换(只在对话框中可用)与全选 10、修复Chrome特定情况下出现的iframe错位问题 11、修正2.0.8版本后锁屏不兼容Safari的问题 12、修复Firefox调大对话框拖帧的现象 13、...
Ex4.0共2个压缩包特性,《ext js权威指南》 前 言 第1章 ext js 4开发入门 / 1 1.1 学习ext js必需的基础知识 / 1 1.2 json概述 / 3 1.2.1 认识json / 3 1.2.2 json的结构 / 3 1.2.3 json的例子 / 4 1.2.4 ...
和/editor/filemanager/upload/simpleuploader,需要在两个映射前面加上/FCKeditor, 即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和 /FCKeditor/editor/filemanager/upload/...