<!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. 创建podSpec,使用pod管理第三方库

    提要: podfile文件会先读取.podspec文件,根据.podspec文件的指向来下载第三方库到项目中. 本文先通过一.二.三项,这三个步骤讲解了如何建立一个.podspec文件在本地.coco ...

  2. Spark Programming--WordCount

    首先在$SPARK_HOME主目录下建立一个test文件夹,里面放一些文件(注意文件全部内容都可被hadoop用户访问,否则运行会出现permission denied的错误) 打开pyspark: ...

  3. Swift-06-闭包

    看完记不住,只好继续抄课文. 如果某个存储型属性的默认值需要特别的定制或者准备,就可以使用闭包或者全局函数来为其属性提供定制的默认值.每当某个属性所属的新类型实例创建时,对应的闭包或者函数会被调用,而 ...

  4. imx6 生成 spi设备节点

    开发板需要使用spi接口,但是spi接口被touch占用,使用event进行操作.所以需要更改配置,生成spi设备节点. 参考链接 https://community.nxp.com/thread/3 ...

  5. 《JAVA NIO》第一章 简介

    1.2 CPU已不再是束缚 相反,是JVM 自身在I/O 方面效率欠佳.操作系统与Java 基于流的I/O模型有些不匹配. 操作系统要移动的是大块数据(缓冲区),这往往是在硬件直接存储器存取(DMA) ...

  6. Infinity loop in cursor iteration

    原始代码如下: begin DECLARE @SQL_STMT NVARCHAR(300), @V_CLIENT_ID INT, @V_PGNAME VARCHAR(1000), @V_LOGID I ...

  7. jq 的连续动画

    var direction='right'; (function(){ var css={ 'left':'398px' }; if(direction==='right'){ direction=' ...

  8. saltstack之(八)配置管理部署LAMP

    场景:公司有10台服务器需要安装lamp测试环境,使用saltstack编写state文件进行批量部署,可以提高工作效率,减少人为出错的可能性,保证环境的一致性. saltstack之配置管理lamp ...

  9. onRetainNonConfigurationInstance和getLastNonConfigurationInstance

    很多网友可能知道Android横竖屏切换时会触发onSaveInstanceState,而还原时会产生 onRestoreInstanceState,但是Android的Activity类还有一个方法 ...

  10. Flask 与 Celery 在 windows 下的集成问题

    Flask 与 Celery 在 windows 下的集成问题 所有的 Web 框架内部的视图中不适合执行需要长时间运行的任务,包括 Flask .Django 等.这类型的任务会阻塞 Web 的响应 ...