《最简单的代码实现Tab》的评论 http://www.artcss.com/archives/762.html 一个像素的距离... Tue, 30 Aug 2011 05:21:57 +0000 hourly 1 http://wordpress.org/?v=3.2.1 作者：» 封装的前端栏目选项卡(滑动门) http://www.artcss.com/archives/762.html/comment-page-1#comment-318 » 封装的前端栏目选项卡(滑动门) Tue, 12 Oct 2010 03:09:04 +0000 http://www.artcss.com/?p=762#comment-318 [...] 第一种不带自动切换 <!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=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.brucehan.com/bat/js/jq_1.4.js”></script> <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(function(){ var i=0; function oTab (){ $(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide().siblings(“.”+$(this).attr(“id”)).show(); } $(“.tabt span,.tabt2 span”).mouseover(oTab); $(“.tabt3 span”).click(oTab); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 第二种带自动切换功能！ <!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=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.artcss.com/js/jq_1.4.js”></script> <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(function(){ var i=0; function oTab (){ $(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide() .siblings(“.”+$(this).attr(“id”)).show(); i = $(“.tabt4 span”).index(this); } function oStart(i){ $(“.tabt4 span”).eq(i).addClass(“current”).siblings().removeClass(“current”); $(“#auto dd”).eq(i).show().siblings(“dd”).hide(); } function oTimer(){ oStart(i); i++; if(i==4) { i=0; } } var myTimer = setInterval(oTimer,1000); //鼠标悬停和移开的情况用hover $(“#auto”).hover(function(){ if(myTimer) { clearInterval(myTimer); } },function(){ myTimer = setInterval(oTimer,1000); }); $(“.tabt span,.tabt2 span,.tabt4 span”).mouseover(oTab); $(“.tabt3 span”).click(oTab); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>三、自动切换</h2> <dl id=”auto”> <dt> <span id=”e1″>111</span> <span id=”e2″>222</span> <span id=”e3″>333</span> <span id=”e4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 原文出处：前段思考 [...] [...] 第一种不带自动切换 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.brucehan.com/bat/js/jq_1.4.js”></script&gt; <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(function(){ var i=0; function oTab (){ $(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide().siblings(“.”+$(this).attr(“id”)).show(); } $(“.tabt span,.tabt2 span”).mouseover(oTab); $(“.tabt3 span”).click(oTab); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 第二种带自动切换功能！ <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt; <html xmlns=”http://www.w3.org/1999/xhtml”&gt; <head> <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ /> <meta name=”description” content=”前端思考，专注前端开发，关注用户体验，artskin artcss ” /> <meta name=”keywords” content=”前端思考,artskin,artcss ” /> <script type=”text/javascript” src=”http://www.artcss.com/js/jq_1.4.js”></script&gt; <title>最简单的弹出层：前端思考</title> <style> *{margin:0;padding:0px;font-family:Microsoft YaHei,Verdana,Arial;} h2{clear:both;padding:10px;font-size:16px;font-weight:normal} .tab{margin-left:10px;float:left;display:inline;} .tab dt{height:20px;} .tab dt span{display:block;width:50px;height:20px;line-height:20px;text-align:center;float:left;margin-right:1px;display:inline;cursor:default;background:#ddd;} .tab dt span.current{background:green;color:#fff;} .tab dd{width:201px;height:100px;font-size:36px;text-align:center;line-height:100px;border:1px solid green;display:none} </style> <script type=”text/javascript”> $(function(){ var i=0; function oTab (){ $(this).addClass(“current”).siblings().removeClass(“current”).parent().siblings().hide() .siblings(“.”+$(this).attr(“id”)).show(); i = $(“.tabt4 span”).index(this); } function oStart(i){ $(“.tabt4 span”).eq(i).addClass(“current”).siblings().removeClass(“current”); $(“#auto dd”).eq(i).show().siblings(“dd”).hide(); } function oTimer(){ oStart(i); i++; if(i==4) { i=0; } } var myTimer = setInterval(oTimer,1000); //鼠标悬停和移开的情况用hover $(“#auto”).hover(function(){ if(myTimer) { clearInterval(myTimer); } },function(){ myTimer = setInterval(oTimer,1000); }); $(“.tabt span,.tabt2 span,.tabt4 span”).mouseover(oTab); $(“.tabt3 span”).click(oTab); }); </script> </head> <body> <h2>一、鼠标滑过（调用两个）</h2> <dl> <dt> <span id=”t1″>111</span> <span id=”t2″>222</span> <span id=”t3″>333</span> <span id=”t4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <dl> <dt> <span id=”c1″>111</span> <span id=”c2″>222</span> <span id=”c3″>333</span> <span id=”c4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>二、鼠标点击</h2> <dl> <dt> <span id=”d1″>111</span> <span id=”d2″>222</span> <span id=”d3″>333</span> <span id=”d4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> <h2>三、自动切换</h2> <dl id=”auto”> <dt> <span id=”e1″>111</span> <span id=”e2″>222</span> <span id=”e3″>333</span> <span id=”e4″>444</span> </dt> <dd style=”display:block”>一</dd> <dd>二</dd> <dd>三</dd> <dd>四</dd> </dl> </body> </html> 原文出处：前段思考 [...]

]]> 作者：QQ农场 http://www.artcss.com/archives/762.html/comment-page-1#comment-253 QQ农场 Tue, 20 Jul 2010 04:26:12 +0000 http://www.artcss.com/?p=762#comment-253 很不错哦。 很不错哦。

]]> 作者：SteepVi's Blog – 肥皂泡的简单生活 » jQuery：一行的切换tab代码 http://www.artcss.com/archives/762.html/comment-page-1#comment-162 SteepVi's Blog – 肥皂泡的简单生活 » jQuery：一行的切换tab代码 Wed, 19 May 2010 01:54:18 +0000 http://www.artcss.com/?p=762#comment-162 [...] 【转】http://www.artcss.com/?p=762 你可能还会关心这些2010/05/17 -- jQuery：$post、$get、$ajax与php，实现异步加载。2010/05/13 -- jQuery：垂直洋葱皮折叠、展开效果 – 多用于侧边栏目的展示2010/04/29 -- jQuery：noConflict()解决多库共存的问题2010/04/01 -- Jquery：内容简介更多展开收缩效果 2010/03/04 -- Lazy Loader Plugin-延迟加载图片jquery插件 上一篇文章： 下一篇文章：jQuery：$post、$get、$ajax与php，实现异步加载。 $("#loadpercent").animate({width:"67px"}) [...] [...] 【转】http://www.artcss.com/?p=762 你可能还会关心这些2010/05/17 — jQuery：$post、$get、$ajax与php，实现异步加载。2010/05/13 — jQuery：垂直洋葱皮折叠、展开效果 – 多用于侧边栏目的展示2010/04/29 — jQuery：noConflict()解决多库共存的问题2010/04/01 — Jquery：内容简介更多展开收缩效果 2010/03/04 — Lazy Loader Plugin-延迟加载图片jquery插件 上一篇文章： 下一篇文章：jQuery：$post、$get、$ajax与php，实现异步加载。 $("#loadpercent").animate({width:"67px"}) [...]

]]>