代码如下,保存到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.  .seleListCont
  25.  {
  26.  clear:both;
  27.  border-top:1px solid #39B3DA;
  28.  padding-top:10px;
  29.  width:200px;
  30.  }
  31.  
  32.  .seleList {
  33.  
  34.  }
  35.  .seleList li {
  36.  float:left;
  37.  line-height:22px;
  38.  }
  39.  .seleList li a {
  40.  line-height:22px;
  41.  padding:0 10px;
  42.  }
  43.  .seleList li.hover {
  44.  background:none repeat scroll 0 0 #FFFFFF;
  45.  border-left:1px solid #39B3DA;
  46.  border-right:1px solid #39B3DA;
  47.  border-top:1px solid #39B3DA;
  48.  bottom:-1px;
  49.  margin-left:5px;
  50.  position:relative;
  51.  }
  52.  </style>
  53.  </head>
  54.  
  55.  <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
  56.  <script type="text/javascript">
  57.  
  58.  // JavaScript Document
  59.  /*******************************************************************************
  60.  * 标题： TAB 选项
  61.  *******************************************************************************/
  62.  
  63.  jQuery(function($) {
  64.  $("#Move ul li").mouseover(function() {
  65.  var s = $(this).parent().children().index(this); //寻找父级下子元素第几个
  66.  $(this).parent().children().removeClass("hover"); //寻找父级下子元素的hover Css样式
  67.  $(this).addClass("hover")
  68.  $(this).parent().parent().next()
  69.  .children().hide()
  70.  .eq(s).show(); //s元素显示
  71.  });
  72.  
  73.  })
  74.  
  75.  </script>
  76.  
  77.  <body>
  78.  <div style="width:200px;margin:10px auto;">
  79.  <div class="seleList" id="Move">
  80.  <ul>
  81.  <li class="hover"><a href="javascript:void(0);">jQuery</a></li>
  82.  <li><a href="javascript:void(0);">Javascript</a></li>
  83.  </ul>
  84.  </div>
  85.  <div class="seleListCont">
  86.  <ul>
  87.  <li><a href="http://keleyi.com/a/bjac/etvljevm.htm" target="_blank">jQuery实现固定底部菜单</a></li>
  88.  <li><a href="http://keleyi.com/a/bjac/ec2s9a4n.htm" target="_blank">一个jQuery ajax瀑布流的例子</a></li>
  89.  <li><a href="http://keleyi.com/keleyi/" target="_blank">keleyi菜单插件首页</a></li>
  90.  <li><a href="http://keleyi.com/a/bjac/e7hhwai7.htm" target="_blank">jQ判断子元素是否包含某标签</a></li>
  91.  <li><a href="http://keleyi.com/a/bjac/bfi2kyi5.htm" target="_blank">jQuery各种事件概述</a></li>
  92.  <li><a href="http://keleyi.com/a/bjac/xbfftiqj.htm" target="_blank">jq获取下一个元素节点</a></li>
  93.  <li><a href="http://keleyi.com/a/bjac/fcskag7j.htm" target="_blank">jquery实现a:hover效果</a></li>
  94.  <li><a href="http://keleyi.com/a/bjac/bqii05en.htm" target="_blank">jQuery拉开关闭帷幕</a></li>
  95.  <li><a href="http://keleyi.com/a/bjac/c4oc8tyo.htm" target="_blank">弹出菜单jQuery插件</a></li>
  96.  </ul>
  97.  <ul style="display: none;">
  98.  <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>
  99.  </ul>
  100.  </div>
  101.  </div>
  102.  </body>
  103.  </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. ENode通信层性能测试结果

    测试环境 两台笔记本网线直连,通过测速工具(jperf)测试,确定两台电脑之间的数据传输速度可以达到1Gbps,即千兆网卡的最大速度.两台电脑硬件配置如下: client服务器,CPU:Intel i ...

  2. iOS开发系列--让你的应用“动”起来

    --iOS核心动画 概览 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建 ...

  3. ES7之Decorators实现AOP示例

    在上篇博文CoffeeScript实现Python装潢器中,笔者利用CoffeeScript支持的高阶函数,以及方法调用可省略括符的特性,实现了一个类似Python装潢器的日志Demo.这只是一种伪实 ...

  4. 仅此一文让你明白ASP.NET MVC 之View的显示（仅此一文系列二）

    题外话 一周之前写的<仅此一文让你明白ASP.NET MVC原理>受到了广大学习ASP.NET MVC同学的欢迎,于是下定决心准备把它写成一个系列,以满足更多求知若渴的同学们.蒋金楠老师已 ...

  5. ASP.NET MVC 过滤器(五)

    ASP.NET MVC 过滤器(五) 前言 上篇对了行为过滤器的使用做了讲解,如果在控制器行为的执行中遇到了异常怎么办呢?没关系,还好框架给我们提供了异常过滤器,在本篇中将会对异常过滤器的使用做一个大 ...

  6. Npm install failed with “cannot run in wd”

    Linux环境下,root账户,安装某些npm包的时候报下面的错误,例如安装grunt-contrib-imagemin时: Error: EACCES, mkdir '/usr/local/lib/ ...

  7. LInux 查看环境变量

    1. 显示环境变量HOME $ echo $HOME /home/redbooks 2. 设置一个新的环境变量hello $ export HELLO="Hello!" $ ech ...

  8. [译]AngularJS sercies - 获取后端数据

    原文:ANGULARJS SERVICES – FETCHING SERVER DATA $http是AngularJS内置的服务,能帮助我们完成从服务端获数据.简单的用法就是在你需要数据的时候,发起 ...

  9. Sql Server系列：索引基础

    1 索引概念 索引用于快速查找在某个列中某个特定值的行,不使用索引,数据库必须从第1条记录开始读完整个表,知道找出需要的行.表越大,查询数据所花费的时间越多.如果表中查询的列有索引,数据库能快速到达一 ...

  10. Android 设置对话框全屏

    1.在styles.xml中添加一个style: <style name="Dialog_Fullscreen"> <item name="androi ...