代码如下,保存到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>

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

 <style type="text/css">

 /* CSS Document 全局*/

 *{padding:0;margin:0;}

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

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

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

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

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

 em{font-style:normal;}

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

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

 a:visited{color:#666;}

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

 .left{ float:left;}

 .right{float:right;}

 .clear{ clear:both; }

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

 /*End 全局*/

 .seleListCont

 {

 clear:both;

 border-top:1px solid #39B3DA;

 padding-top:10px;

 width:200px;

 }

 .seleList {

 }

 .seleList li {

 float:left;

 line-height:22px;

 }

 .seleList li a {

 line-height:22px;

 padding:0 10px;

 }

 .seleList li.hover {

 background:none repeat scroll 0 0 #FFFFFF;

 border-left:1px solid #39B3DA;

 border-right:1px solid #39B3DA;

 border-top:1px solid #39B3DA;

 bottom:-1px;

 margin-left:5px;

 position:relative;

 }

 </style>

 </head>

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

 <script type="text/javascript">

 // JavaScript Document

 /*******************************************************************************

 * 标题： TAB 选项

 *******************************************************************************/

 jQuery(function($) {

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

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

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

 $(this).addClass("hover")

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

 .children().hide()

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

 });

 })

 </script>

 <body>

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

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

 <ul>

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

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

 </ul>

 </div>

 <div class="seleListCont">

 <ul>

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

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

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

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

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

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

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

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

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

 </ul>

 <ul style="display: none;">

 <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>

 </ul>

 </div>

 </div>

 </body>

 </html>

jquery实现tab切换完整代码的更多相关文章

  1. jquery写tab切换,三行代码搞定

    <script type="text/javascript"> $("button").on("click",function( ...

  2. jQuery弹出窗口完整代码

    jQuery弹出窗口完整代码 效果体验:http://keleyi.com/keleyi/phtml/jqtexiao/1.htm 1 <!DOCTYPE html PUBLIC "- ...

  3. JQuery实现tab切换

    JQuery实现tab切换: (jquery需要自己添加) <!DOCTYPE html> <html lang="en"> <head> &l ...

  4. jQuery雷达扫描切换幻灯片代码

    基于jQuery雷达扫描切换幻灯片代码.这是一款切换效果类似雷达扫描,支持鼠标滚轮滚动切换.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=" ...

  5. 基于jQuery左右滑动切换图片代码

    分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览   源码下载 实现的代码: <div class="v_ou ...

  6. jQuery带tab切换搜索框样式代码

    效果体验:http://hovertree.com/texiao/jquery/23/ 代码如下,保存到HTML文件也可以查看效果: <!DOCTYPE html> <html la ...

  7. jquery 实现tab切换

    大家都知道 使用QQ的时候需要输入账号和密码 这个时候一个TAB键盘就可以实现切换到下一个输入框里 具体是怎么实现的呢 请看代码 <!DOCTYPE html> <html lang ...

  8. jquery简易tab切换

    切换tab 使用eq()函数 eq() 方法将匹配元素集缩减值指定 index 上的一个. //为项目 3 设置红色背景 <ul> <li>list item 1</li ...

  9. 通过jquery实现tab切换

    //css代码 *{ margin: 0; padding: 0; } #box{ margin: 0 auto; width: 800px; border: 5px solid #000000; o ...

随机推荐

  1. [译]MVC网站教程（一）：多语言网站框架

    本文简介 本博文介绍了 Visual Studio 工具生成的 ASP.NET MVC3 站点的基本框架:怎样实现网站的语言的国际化与本地化功能,从零开始实现用户身份认证机制,从零开始实现用户注册机制 ...

  2. node如何让一个端口同时支持https与http

    众所周知node是一个高性能的web服务器,使用它可以很简单的创建一个http或https的服务器. 比如一个很简单的http服务器: var http = require('http'); var ...

  3. [.net 面向对象程序设计进阶] (18) 多线程(Multithreading)(三) 利用多线程提高程序性能（下）

    [.net 面向对象程序设计进阶] (18) 多线程(Multithreading)(二) 利用多线程提高程序性能(下) 本节导读: 上节说了线程同步中使用线程锁和线程通知的方式来处理资源共享问题,这 ...

  4. Web3DGame之路（三）分析babylonjs

    BabylonJS的例子十分详实 http://doc.babylonjs.com/tutorials Babylonjs的学习比较顺畅,开始做一些深入分析   一.语言选择 首先是js还是ts的问题 ...

  5. Can't use Subversion command line client: svn Probably the path to Subversion executable is wrong. Fix it.

    1.最近使用SVN工具时,Checkout出项目到本地后后,然后将其导入到Intellij idea中开发,在提交svn代码的时候,出现这样的错误:Can't use Subversion comma ...

  6. 防止SQL注入攻击

    了解了SQL注入的方法,如何能防止SQL注入?如何进一步防范SQL注入的泛滥?通过一些合理的操作和配置来降低SQL注入的危险. 使用参数化的过滤性语句 要防御SQL注入,用户的输入就绝对不能直接被嵌入 ...

  7. 一次 Oracle 算出运算溢出问题 排查解决 (并非除数为零!)

    前段时间 出现过这个问题,: 表中有一列为number类型 rec_recordlength (两个时间的间隔长度/秒) 部分数据 统计这个字段就会出现 "算出运算溢出" 错误,很 ...

  8. Spring学习记录(七)---表达式语言-SpEL

    SpEL---Spring Expression Language:是一个支持运行时查询和操作对象图表达式语言.使用#{...}作为定界符,为bean属性动态赋值提供了便利. ①对于普通的赋值,用Sp ...

  9. mac下tomcat的安装与配置

    1.到 apache官方主页 下载 Mac 版本的完整 tar.gz文件包.解压拷贝到 /Library目录下,并命名为Tomcat,其他目录也可.   2.修改目录权限 到终端输入 sudo chm ...

  10. SVN-让项目不包括Bin和Obj

    方案一: 方案二: 方法三: 添加自定义文件夹或者文件的过滤 eg:.svn .git .vs obj bin  *.o *.lo *.la *.al .libs *.so *.so.[0-9]* * ...