由于近来学了点js，于是我装逼道。。。不太难吧。。。就切一下display属性？同学无视我。。说要搞个通用的。。。什么还要跟ajax交互。。？？？我愣是没有听懂。。。到底要搞什么。。。权当作练手，我自己胡弄了一个。 需求：同学口中的通用我不知道神马意思。。。那我就按自己的理解吧。。 ①跨浏览器，IE6+，FF，Chrome，Safari，Opera ②同一个页面可以用同一个js设置不同的选项卡。 说太多没啥米用，来...
其实不然，用《精通Dojo》里的话来说就是"Dojo不只是一个程序库，而是一个工具包"，它比其他所有的JS库的插件更全面更广阔。它包含大约40个用户界面控件、1个图形框架、cometd支持、1个打包系统，还有其他的一些东西。 从dojo官方网站 上下载最新版1.6，解压下来，它有三个文件夹分别是： 1. dojo: 是Dojo基础，你要做的其它事情都是在它的基础上，类似于jquery.js文件，但比它更丰富了一些其他功能; 2. dijit : Dojo的小部件框...
jquery代码 代码如下:$(function(){ //选项卡 var $qqbind=$("#qq_1_1 ul li"); //获取要变化的标题为了设置它背景色变化 $qqbind.click(function(){ var ch=$qqbind.has("pre"); //去找带有pre这个标签的标题;pre是设置她的背景样式下面要用 ch.html(ch.children("pre").html()); //把带有pre标签的去掉 $(this).wrapInner("<pre></pre>"); //给当前得$qqbind的内容上包围<pre> 元素： $("#tab_bx").children("div").removeClass...
效果图:动感效果的TAB选项卡 jquery 插件 代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link href="tab.css" rel="stylesheet" type="text/css" /> <script type="text/javasc...
首先前台代码 代码如下:<div class="tab"> <div class="tab_menu"> <ul> <li class="selected">个人信息</li> <li class="selected">我的照片</li> <li class="selected">我的博客</li> <div class="clear"></div> </ul> </div> <div class="tab_box"> <div class="box">我的QQ:1511109272</div> <div class="box hide">hi </div> <div class="box hide"> hello <br> </div> </div> </div> 接着可以jquery代码设置 代码如下:$(f...
JS部分具体的代码如下： 代码如下:var getSiblingNode=function(className,elAr,el,not){ className=" "+className+" "; var Arr=[]; for(var i=0,l=elAr.length;i<l;i++){ if(elAr[i]!=el&&(elAr[i].nodeType===1)&&(" "+elAr[i].className+" ").indexOf(className)>-1&& not){ Arr.push(elAr[i]); } else if(elAr[i]!=el&&elAr[i].nodeType===1){ Arr.push(elAr[i]); } } return Arr; } var runFn=function(id,parentId){ var e...
思路就不说了，记得以前写过一个自动切换的幻灯插件：，思路有部分是类似的。当然，本文中插件源码中也有注释~ 插件核心代码：点此查看演示 代码如下:$.fn.WIT_SetTab=function(iSet){ /* * @Mr.Think * Nav: 导航钩子； * Field：切换区域 * K:初始化索引； * CurCls：高亮样式； * Auto：是否自动切换； * AutoTime：自动切换时间； * OutTime：淡入时间； * InTime：淡出时间； * CrossTime：鼠标无意识划过时间 * Ajax：是否开...
有图如下: 代码如下: 代码如下:/* head html : <span></span> body html : <iframe></iframe> */ var Tab = function(id,title,url,isClose){ this.id = id; this.title = title; this.url = url; this.head = jQuery(<span class="tab-head"> + this.title +</span>); this.body = jQuery(<iframe name="ifm + this.id +" src=" + this.url +" frameborder=0 class="tab-body"></iframe>).hide(); isClose && (this.close = jQuer...
顺便也找 来了不少优秀的Tab选项卡实例，在这里与大家分享一下。当然，最终我没有用到IdTabs以及如下任何一个实例，我只是很不服气的自己写了个小插件，尚 不完善，就不于此共享了。先来看看老外们出色的基于JQuery的各式Tab选项卡吧：1. jQuery 选项卡界面 / 选项卡结构菜单教程这种 类型的菜单在网页设计与开发中非常著名的。此片教程是向大家展示如何使用jQuery的向下滑动/向上滑动效果创建属于你自己的选项卡菜单。要非常留心此...
关于思路,和常规选项卡思路一样.点击选项菜单,突出显示,并显示对应的选项.本文实例中主要是通过判断点击菜单在菜单列表中的索引位置来显示或隐藏选项区.原生js还有很多种实现方法(蓝色理想中搜索),为了与jQ版思路保持一致,本文实例用的是循环判断. 详见注释. 另有几点说明: 1. 通过本文DEMO演示,可以很明显的看到原生JS的window.onload=function(){…}与jQuery的$(document).ready(function(){…});的区别,这也是我为什么不用样式定...
经典选项卡 .tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;} .tab dt{border-bottom:#ccc 1px solid;height:25px;background:#f1f1f1;margin-bottom:-1px;height:25px;line-height:25px;} .tab dt strong{padding:0 15px;color:#444;} .tab dt a{display:inline-block;cursor:pointer;padding:0 10px;text-align:center;background:#f1f1f1;color:#000;} .tab dt a.on{background:#fff;color:#333;fon...
第一步：引用table.js 代码如下:<script type="text/javascript" src="table.js"> </script> 第二步：定义选中的样式，比如“active”，应用选项卡的块的ID，比如“sidebar”，默认被选中的序号，比如第一个“0”； 第三步：调用函数： 代码如下:<script type="text/javascript"> //参数分别为：默认选择项 应用块的id 选中的样式 table(0, "sidebar", "active") </script> 一切OK，选项卡响应click事件，兼任IE和FF，等有时间...
回归原始，当样式切换后，把控制权还给页面，即table.js仅控制切换样式和记录操作： 代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>New Web Project</title> <style type="text/css"> .sidebar { width: 140px; backgro...
* { padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; font-size: 12px; padding-top: 0px; } BODY { padding-left: 20px; padding-top: 20px; } .wid240 { width: 242px; margin-bottom: 20px; } .wid180 { width: 182px; } .tab { border-bottom: #000 1px solid; border-left: #000 1px solid; border-top: #000 1px solid; border-right: #000 1px solid; } .tab UL ...
介绍的是基于JQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在js文件里，做到行为与结构的分离。在实际应用过程中，只 要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。 现在，...