jquery实现tab切换完整代码

代码如下,保存到html文件打开:

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  2 <html xmlns="http://www.w3.org/1999/xhtml">

  3 <head>

  4 <title>jquery实现tab切换-柯乐义</title>

  5 <style type="text/css">

  6 /* CSS Document 全局*/

  7 *{padding:0;margin:0;}

  8 html{border:0;width:100%;}

  9 body{font-family:Arail,"宋体",verdana;font-size:12px;line-height:1.5em;color:#666; }

 10 img{border:none;}input,select{vertical-align:middle; margin-right:2px;}

 11 ol,ul,li {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}

 12 ol, ul {list-style:none outside none;}

 13 em{font-style:normal;}

 14 a{text-decoration:none;color:#666;}

 15 a:hover,a:active{text-decoration:underline;color:#41ABCE;}

 16 a:visited{color:#666;}

 17 h1{font-size:16px;}h2,h3,h4{font-size:13px;}h5,h6{font-size:12px;}

 18 .left{ float:left;}

 19 .right{float:right;}

 20 .clear{ clear:both; }

 21 .Wrap{margin:0 auto 0;overflow:hidden;width:960px;}

 22 /*End 全局*/

 23 

 24 

 25 .seleListCont 

 26 {

 27 clear:both;

 28 border-top:1px solid #39B3DA;

 29 padding-top:10px;

 30 width:200px;

 31 }

 32 

 33 .seleList {

 34 

 35 }

 36 .seleList li {

 37 float:left;

 38 line-height:22px;

 39 }

 40 .seleList li a {

 41 line-height:22px;

 42 padding:0 10px;

 43 }

 44 .seleList li.hover {

 45 background:none repeat scroll 0 0 #FFFFFF;

 46 border-left:1px solid #39B3DA;

 47 border-right:1px solid #39B3DA;

 48 border-top:1px solid #39B3DA;

 49 bottom:-1px;

 50 margin-left:5px;

 51 position:relative;

 52 }

 53 </style>

 54 </head>

 55 

 56 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>

 57 <script type="text/javascript">

 58 

 59 // JavaScript Document

 60 /*******************************************************************************

 61 * 标题: TAB 选项

 62 *******************************************************************************/

 63 

 64 jQuery(function($) {

 65 $("#Move ul li").mouseover(function() {

 66 var s = $(this).parent().children().index(this); //寻找父级下子元素第几个

 67 $(this).parent().children().removeClass("hover"); //寻找父级下子元素的hover Css样式

 68 $(this).addClass("hover")

 69 $(this).parent().parent().next()

 70 .children().hide()

 71 .eq(s).show(); //s元素显示

 72 });

 73 

 74 })

 75 

 76 </script>

 77 

 78 <body>

 79 <div style="width:200px;margin:10px auto;">

 80 <div class="seleList" id="Move">

 81 <ul>

 82 <li class="hover"><a href="javascript:void(0);">jQuery</a></li>

 83 <li><a href="javascript:void(0);">Javascript</a></li>

 84 </ul>

 85 </div>

 86 <div class="seleListCont">

 87 <ul>

 88 <li><a href="http://keleyi.com/a/bjac/etvljevm.htm" target="_blank">jQuery实现固定底部菜单</a></li>

 89 <li><a href="http://keleyi.com/a/bjac/ec2s9a4n.htm" target="_blank">一个jQuery ajax瀑布流的例子</a></li>

 90 <li><a href="http://keleyi.com/keleyi/" target="_blank">keleyi菜单插件首页</a></li>

 91 <li><a href="http://keleyi.com/a/bjac/e7hhwai7.htm" target="_blank">jQ判断子元素是否包含某标签</a></li>

 92 <li><a href="http://keleyi.com/a/bjac/bfi2kyi5.htm" target="_blank">jQuery各种事件概述</a></li>

 93 <li><a href="http://keleyi.com/a/bjac/xbfftiqj.htm" target="_blank">jq获取下一个元素节点</a></li>

 94 <li><a href="http://keleyi.com/a/bjac/fcskag7j.htm" target="_blank">jquery实现a:hover效果</a></li>

 95 <li><a href="http://keleyi.com/a/bjac/bqii05en.htm" target="_blank">jQuery拉开关闭帷幕</a></li>

 96 <li><a href="http://keleyi.com/a/bjac/c4oc8tyo.htm" target="_blank">弹出菜单jQuery插件</a></li>

 97 </ul>

 98 <ul style="display: none;">

 99 <li><a href="http://keleyi.com/a/bjac/f8t46jg7.htm" target="_blank">JavaScript闭包解析</a></li><li><a href="http://keleyi.com/a/bjac/n14duxiv.htm" target="_blank">Javascript作用域</a></li><li><a href="http://keleyi.com/a/bjac/tcxhi6x1.htm" target="_blank">深入理解JavaScript的闭包</a></li><li><a href="http://keleyi.com/a/bjac/xpcxjymm.htm" target="_blank">通俗易懂的Javascript闭包介绍</a></li><li><a href="http://keleyi.com/a/bjac/6nha88id.htm" target="_blank">关于javascript闭包的简单介绍</a></li><li><a href="http://keleyi.com/a/bjac/9a9irmcm.htm" target="_blank">javascript的switch的使用注意</a></li><li><a href="http://keleyi.com/a/bjac/vovf3t3l.htm" target="_blank">浏览器窗口大小被改变时触发的事件</a></li><li><a href="http://keleyi.com/a/bjac/2k683du4.htm" target="_blank">眼珠随着光标移动JS特效</a></li><li><a href="http://keleyi.com/a/bjac/nmixur5x.htm" target="_blank">确认关闭网页的js代码</a></li><li><a href="http://keleyi.com/a/bjac/4me5brln.htm" target="_blank">Javascript的变量作用域原理详解</a></li><li><a href="http://keleyi.com/a/bjac/dyloru9f.htm" target="_blank">js获取屏幕分辨率</a></li><li><a href="http://keleyi.com/a/bjac/4esxhwgr.htm" target="_blank">js存、取、删除cookies实例</a></li>

100 </ul>

101 </div>

102 </div>

103 </body>

104 </html>

 

你可能感兴趣的:(jquery)