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

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键(按回车跳到下一栏)

    一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...

  2. IAR修改工程名称Tab键设置模板建立

    IAR 修改工程名称 很多时候用IAR开发都是基于已有工程模板开发的,但是工程模板的名称经常让人头疼:以下是修改办法: 从一个实例工程复制后缀名为"dep,ewd,ewp,eww" ...

  3. html---textarea初始化时就有个table空格以及tab键操作无效

    1 初始化时就有一个tab空格 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJlZUFwZQ==/font/5a6L5L2T/fontsize/400 ...

  4. jQuery----jquery实现Tab键切换

    使用Jquery实现tab键切换,代码简洁易懂,实现逻辑清晰明了.具体总结如下: 需求分析: 鼠标进入tab切换模块,鼠标当前的模块上边框变为红色,并显示对应的商品名称.鼠标离开后,上边框恢复原色,图 ...

  5. source insight 保存时删除多余空格，去除多余空格 space tab键

    source insight 保存时删除多余空格,去除多余空格 space tab键 摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...

  6. tab键、快捷键、默认按钮、小数点输入的使用--四则运算

    1. 窗体Tab键的顺序设置 选中窗体-视图-tab键顺序 label不适用tab键 2. 热键设置和快捷键设置 热键:无论光标在哪都可以 快捷键:出现界面后才能按 添加label 更改label的T ...

  7. python中使用空格还是使用 Tab键缩进的建议

    对于程序员来说,其实Tab和空格远远不只是“立场”问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格不会出现这个问题,因 ...

  8. jQuery介绍 DOM对象和jQuery对象的转换与区别

    jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍      jQuery: http://jquery.com/      write less, do more.   j ...

  9. 给大家分享一个jQuery TAB插件演示

    jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

随机推荐

  1. Wall---hdu1348(求凸包周长 模板)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 求凸包周长+2*PI*L: #include <stdio.h> #include ...

  2. 每日目标——HTML 头部标签学习 2015-8-27

    <head> <title>bp</title> <meta http-equiv="Content-Type" content=&quo ...

  3. eclipse中tomcat能正常启动，但是浏览器访问不了tomcat首页

    在eclipse中新建tomcat7,完成后tomcat能够正常启动,但是浏览器问题localhost:8080访问不了. 解决方法如下: 双击eclipse中服务器中的tomcat 出现tomcat ...

  4. robot framework安装步骤

    1.安装python-2.7.11.amd64.msi 2.在命令行窗口输入python命令验证是否成功 3.安装wxPython2.8-win64-unicode-2.8.12.1-py27.exe ...

  5. 学习JAVA 安装

    下载 JDK      Tomcat9     Apache     mod_jk 1.安装JDK 这里就说配置环境变量 添加环境变量 JAVA_HOME(就是jdk的安装路径) CLASSPATH( ...

  6. VMware (威睿) 虚拟化产品简介

    VMware vSphere 是VMware(威睿)的一个虚拟化产品,VMware vSphere 是业界领先且最可靠的虚拟化平台.vSphere将应用程序和操作系统从底层硬件分离出来,从而简化了 I ...

  7. python故障查找：超时未设置

    最近一台基于python的应用服务总是出现问题.需求是用户可以在页面上提交批量处理任务,后台把这些任务入到一个Queue里排队处理,然后通过一个线程专门处理.现在总是偶尔出现假死状态,任务处理中断执行 ...

  8. EBS R12.2安装，使用的操作系统用户

    在安装时,错误使用了oracle rdbms的对应的操作系统用户,导致安装前,验证时"web server install prerequisites"选项验证失败: (本图其它两 ...

  9. json数据传输有感

    必须把object对象o给JSON.stringify(o) json字符串化 传到后台 前台js的对象某属性如果是Array  那后台就是Long[] idsArray  这种bean的属性对应 然 ...

  10. 移动端<head>头部 常用<meta>标签

    <!DOCTYPE html><html lang = ""><head> <title></title> <me ...