- 浏览: 36311 次
- 性别:
- 来自: 广州
最近访客 更多访客>>
最新评论
-
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 1323开始一直用jq的ajax接收值也是字符但是没用过json数据。 ... -
ckeditor 编辑器+finder配置上传功能
2011-04-03 11:53 1336一、官方Download 1、CKEditor ... -
kindeditor/ckeditor 编辑器加+图片自动上传成功(源码下载)
2011-04-03 11:40 2001编辑器加+图片自动上传并且更新编辑器图片的URL成功完例! ... -
js实现的非跨域的iframe高度自适应(完美兼容IE,FF,Opera)
2011-03-12 16:28 1382iframe的高度一直是让人头疼的问题。今天因为有个项目需要用 ... -
js遮罩层
2011-03-12 15:23 799直接贴代码了!(来自:http://www.ok22.org/ ... -
js多Tab自动切换,带完善的鼠标事件
2011-03-01 09:31 1570js多Tab自动切换,带完善的鼠标事件! 说明:打开鼠标时 ... -
js文字上下滚动+左右滚动兼容FF/IE
2011-02-15 11:07 1790我也是最近因为要做这 ... -
前端设计js+Tab切换可关闭+添加并自动判断是否已打开自动切换当前状态
2011-02-14 15:59 1340看了很多别人写的tab切换效果感觉都只是div+js去切换已存 ... -
清空数组的两种方式
2011-02-09 16:58 2272方式一,length赋值为0 这种方式很有意思,其它语言 ... -
js时间倒计时
2011-01-06 11:26 873前断时间,因为需要 ... -
JS可以控制样式的名称写法
2011-01-06 11:19 1020盒子标签和属性对照 CSS语法 (不区分大小写) ... -
js给C#控件赋值
2010-12-30 10:34 1781前台代码 Html代码 <%@ Pa ... -
iframe里面的页面调用父窗口,左右窗口js函数的方法
2010-12-30 10:33 1218iframe里面的页面调用父窗口,左右窗口js函数的方法 ... -
关于图片延迟加载技术-ImageLazyLoad
2010-12-30 10:29 1113关于图片延迟加载技术的优点与缺点(来自http://www ... -
js判断父页存在
2010-12-30 10:26 840当你有多个页面有iframe内页时,你肯定也不想别人直接打开子 ...
相关推荐
如果你的页面只有一个tab切换的地方需要调用js效果 单独为了它你还要为页面加载一个jQuery插件,想必是极痛苦的 所有很多时候,jQuery特效也不是万能的,偶尔来个原生的js效果也是必须的 今天无聊,...
在网页设计中,选项卡(Tab)布局是一种常见的信息展示方式,它可以有效地组织内容,使得用户能够通过简单的点击或滚动操作在多个页面之间切换。本示例中的jQuery全屏TAB页面切换代码,特别强调了鼠标滚动和点击导航...
在本文中,我们将深入探讨如何实现一个基于jQuery的左侧点击tab切换效果,这通常用于创建交互式的网页界面。"jQuery左侧点击tab切换代码"是一种常见的前端开发技术,它允许用户通过点击页面左侧的选项卡来切换不同的...
在网页设计中,Tab 菜单是一种常见的交互元素,用于组织和展示多个内容区域,让用户能够方便地在不同主题之间切换。本文将详细介绍如何使用 JavaScript 和 CSS 结合实现一个基本的 Tab 菜单切换效果。 首先,我们来...
本文将详细介绍如何通过微信小程序的WXML、WXSS及JS来实现一个简单的Tab切换效果。 #### 二、技术原理 Tab切换效果主要依赖于状态管理和样式控制。当用户点击不同的标签时,程序会根据用户的操作更新数据模型中的...
Layui的tab组件是该框架中非常实用的一个组件,它允许开发者在页面上创建多个可切换的标签页。然而,Layui的tab组件默认情况下在切换标签页时并不会刷新内容,有时这种默认行为并不满足开发者的实际需求,比如在某些...
1. **HTML结构**:在HTML中,通常会创建一个包含多个`<li>`元素的无序列表(`<ul>`),每个`<li>`元素代表一个tab选项。这些选项可能包含链接(`<a>`标签)或内联元素(如`<span>`),用于触发点击事件。 2. **CSS...
在网页设计中,选项卡切换是一种常见的交互设计模式,用于在有限的空间内展示大量信息。`i35tab` 是一款基于 jQuery 的选项卡切换插件,它提供了丰富的功能和自定义选项,为网页增添动态且直观的用户体验。下面将...
标题中的“最简单的tab切换实例代码”是指一种基础的网页交互设计,用于在多个内容区块之间切换显示。这种设计常见于导航菜单、设置面板等场景,用户点击不同的选项(tab),对应的内容区域会显示或隐藏,提供简洁的...
【JavaScript Tab标签切换效果详解】 在网页设计中,Tab切换...这个简单的Tab切换效果适用于网页中的各种交互场景,比如展示不同类别的信息或设置多个配置选项。开发者可以根据实际需求进行自定义样式调整和功能扩展。
本文将介绍一个基于纯 JavaScript 实现的 Tab 选项卡特效,通过简单的 CSS 样式和 JavaScript 逻辑,可以轻松实现动态切换内容的效果。 #### 二、核心功能与实现原理 本示例实现了以下功能: 1. **初始化**:自动...
在Python编程领域,实现Tab栏页面的无跳转切换是一种常见的前端交互设计,它能够提供良好的用户体验,使得用户在不同的内容区域之间切换时无需等待页面重新加载。在本案例中,我们将探讨如何利用Python的Web框架,如...
在现代网页设计中,TAB切换是一种常见的交互方式,它可以有效地利用有限的空间展示更多的内容,并提高用户体验。本篇文章将详细解析一个仿126邮箱TAB切换效果的示例代码,通过分析其HTML结构、CSS样式以及JavaScript...
在Vue.js中实现“滚动tab跟随切换效果”是一种常见的移动端交互设计,它可以提供更好的用户体验,让用户更容易地在多个内容区域之间导航。以下是如何利用Vue.js实现这个功能的详细步骤: 首先,我们需要创建一个Vue...
在网页设计中,Tab切换是一种常见的交互元素,用于组织和展示大量内容,使得用户能够方便地在多个子页面或信息块之间切换。本实例通过JavaScript实现了一个简单的Tab点击切换功能,帮助开发者理解如何利用JavaScript...
在本文档中,我们将探讨如何利用 jQuery 实现一个简单的图片上下Tab切换效果。这种效果通常用于展示产品特性或页面导航。 #### 三、HTML结构解析 在示例代码中,HTML 结构是通过一系列 `<div>`、`<h3>` 和 `<p>` ...
在MUI中,我们通常会在HTML文件的`<body>`标签内添加一个`mui-init`属性,将需要在`init`事件触发时执行的JavaScript代码写入其中。例如: ```html <body mui-init="myInitFunction()"> ``` 这里的`...
在实际项目中,可能需要根据需求进行自定义,例如通过JavaScript事件监听器来处理用户点击事件,或者根据页面宽度自动调整为垂直布局。了解这些基础知识后,你就可以灵活地使用Bootstrap创建适应各种屏幕尺寸的多...
Tab布局是jQuery EasyUI中的一个重要特性,它允许在一个页面上展示多个并行的内容区域,每个区域被一个标签页所代表,用户可以通过点击不同的标签来切换显示的内容。这种布局方式常用于后台管理系统,因为它可以有效...
jQuery Tab标签插件是一种常用的前端开发工具,它允许开发者轻松地在网页中实现美观且功能丰富的标签页切换效果。这个插件基于JavaScript库jQuery构建,它简化了HTML、CSS和JavaScript之间的交互,使得即便是初学者...