idTabs是基于Jquery编写封装的一个插件，主要用于实现选项卡功能,它操作简单,只需到官网:http://www.sunsean.com/idTabs/下载插件JS脚本文件,并引用到网站中即可 <script src="js/jquery.idTabs.min.js" type="text/javascript"></script>页面HTML布局及调用如下: <div id="tabsbox" class="tabsbox"> <ul><li><a href=#tab0 class=selected>技术简介</a></li><li><a href=#tab1 class=>技术优势</a></li><li><a href=#tab2 class=...
代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>点击切换和自动切换选项卡</title> <style type="text/css"> *{list-style:none;margin:0;padding:0;overflow:hidden} .tab1{width:401px;border-top:#A8C29F solid 1px;border-bottom:#A8C29F solid 1px;margin:50px 200px;} .menu{width:400px;backgr...
代码如下:<!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><script type="text/javascript" src="jquery-1.8.2.js"></script><script type="text/javascript"> $(function(){ $("#ul2 li").c...
代码如下:<!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>选项卡实现img图片的变换</title> <style type="text/css"> #main{ height:420px; width:400px;} #head{ width:400px; height:52px; position:absolute...
直接贴代码里面有注释：代码如下:/** * 简单的Tab切换 * 支持可配置项 如下参数 */ function Tab(){ this.config = { type : mouseover, //类型 默认为鼠标移上去 autoplay : true, // 默认为自动播放 triggerCls : .list, // 菜单项 panelCls : .tabContent, // 内容项 index : 0, ...
代码如下:<!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>实用的Jquery选项卡</title> <script language="javascript" type="text/javascript" src="jquery-1.9.1.min.js"></script> <style type="text/css"> ....
代码如下:<!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>JavaScript版TAB选项卡</title><script type="text/javascript">function changeTab(id, minId, topCount) { for(var i=minId; i < minI...
代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><title>404 Not Found</title></head><body> <h1>找不到指定的页面</h1> <span id="totalSecond">3</span>秒后自动返回</body><script language="javascript" type="text/javascript"><!-- var second = document.getElementB...
-1、右侧弹出导航菜单完整代码 代码如下:<!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=utf8" /> <title>右侧弹出导航菜单－－柯乐义</title> <style type="text/css"> .my_left_category{ width:150px; font-size:12px; font-...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="js/jquery-1.7.min.js"></script> <head> <title>选项卡插件制作</title> <style type="text/css"> *{margin: 0;padding: 0} .tab{width: 350px;margin: 100px auto;}...
在Web中用到多选项卡功能的网站有很多，比如163和126邮箱，用过的人知道。本人在那么多的类似插件中，目前碰到这个比较好，花了点时间调试出来了，请看效果图：这款插件叫jqueryMagicTabs，上图实现了基本功能，如添加选项卡，选择指定的选项卡。当添加的选项卡超过一定长度时会出现左右滑动的按钮，同时支持鼠标滑动选项卡。 这段代码如下所示： 代码如下:<%@ page language="java"contentType="text/html; charset=UTF-8" pageEn...
代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>jQuery自定义选项卡插件</title><style>body, ul { padding:0; margin:0; }li { list-style:none; }#tabs { zoom:1; }#tab:after { content:""; display:block; clear:both; }#tabs li { float:left; padding:10px; col...
代码如下:<script type="text/javascript"> $(function() { $(".designerspanel").each(function(){ $(this).find(".tabspanel #show:not(:first)").hide(); }); $(".designerspanel li").click(function(){ idname=$(this).parents(.designerspanel).attr(id); current=$("#"+idname+" li:eq(0)").attr(class); current=current.replace("black",""); ...
现在的页面上有许多各种各样的页面效果，常用的有弹出层效果，无缝滚动效果，选项卡切换效果。今天分享一款自己用原生javascript写的选项卡切换效果，由于本人水平有限，如有问题请指出。 效果图如下： html代码： 代码如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="stylesheet" type="text/css" href="css/base.css" media="all"/> <style type="text/css"> a{co...
前段时间写了个tabs 选项卡切换效果，今天抽空在原有的基础上进行了扩展，加入了自动轮播，这样就变成了类似图片轮播的效果了。 html 代码： 代码如下:<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>js-tabs</title> <link rel="stylesheet" type="text/css" href="../css/base.css" media="all"/> <style type="text/css"> a{color:#a0b3d6;} .tabs{border:1px solid #a0b3d6;margin:100px;width:3...