<!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. webView、scrollView、TableView，为了防止滚动时出现偏移，底部黑框问题等

    if ([self respondsToSelector:@selector(automaticallyAdjustsScrollViewInsets)]) {self.automaticallyAd ...

  2. i++和++i的区别

    先看如下程序: class Program { static void Main(string[] args) { ; ; ; ; x = i++; Console.WriteLine("x ...

  3. php命名空间详解

    index.php: <?php include 'demo.php'; use A\demo as test; use B\demo as test2; use C\demo; $obj = ...

  4. java中String.valueOf()和toString()方法的区别

    http://www.ztyhome.com/android-tostring-string-valueof-diff/

  5. 深入浅出 React Native：使用 JavaScript 构建原生应用

    深入浅出 React Native:使用 JavaScript 构建原生应用 链接:https://zhuanlan.zhihu.com/p/19996445 原文:Introducing React ...

  6. thinkphp 对数据库的操作

    查看ThinkPHP完全开发手册3.1 首先编辑配置文件 thinkphp这个数据库就不乱改了 昨天新建了一个 confluence(utf8)数据库 所以就用它学习一下吧,因为就只建立了一个数据库, ...

  7. jsp上传excel文件并导入数据库

    1,excel文件的上传 需要借助jar包:commons-fileupload-1.2.1.jar以及commons-io-1.3.2.jar 前端的html文件 <form id=" ...

  8. 分布式环境下限流方案的实现redis RateLimiter Guava,Token Bucket, Leaky Bucket

    业务背景介绍 对于web应用的限流,光看标题,似乎过于抽象,难以理解,那我们还是以具体的某一个应用场景来引入这个话题吧. 在日常生活中,我们肯定收到过不少不少这样的短信,“双11约吗?,千款….”,“ ...

  9. js markdown chart flow

    http://knsv.github.io/mermaid/#example-of-a-marked-renderer

  10. oracle pl sql 解锁表

    select   p.spid,a.serial#, c.object_name,b.session_id,b.oracle_username,b.os_user_name   from   v$pr ...