<!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. 安装PHPStudy2014,打开端口出现80端口 PID4 进程：System-windows服务器应用

    原文:安装PHPStudy2014,打开端口出现80端口 PID4 进程:System-windows服务器应用-黑吧安全网 安装PHPStudy2014,打开端口出现80端口 PID4 进程:Sys ...

  2. httpd.conf

    修改配置文件-时会弹出一个文本式的文件 1.搜索:#LoadModule rewrite_module modules/mod_rewrite.so,去掉前面的# 2.全部替换AllowOverrid ...

  3. LightOj1190 - Sleepwalking（判断点与多边形的位置关系--射线法模板）

    题目链接:http://lightoj.com/volume_showproblem.php?problem=1190 题意:给你一个多边形含有n个点:然后又m个查询,每次判断点(x, y)是否在多边 ...

  4. iOS面试题 02

    在面试的时候,面试官问我,“你对内存管理了解的多吗?” 我忘了当时是怎么回答的了,但是,肯定是一时没想起来怎么回答. 1.谁创建谁释放 2.autoreleasepool 3.retain,copy, ...

  5. MFC之常用控件（四）

    常用控件主要包括:静态文本框.编辑框.单选按钮.复选框.分组框.列表框.组合框.图片控件.列表控件.树形控件和进度条控件等等.本节教程先来讲解静态文本框的使用. 控件的通知消息 在将静态文本框的使用之 ...

  6. 常用jq选择器和遍历的使用

    1.jq的选择器,常用有哪些? class id > ~ ul li a 2.遍历的使用(在使用用遍历节点时,我们的注意遍历在不传递参数(也就是传参),代表的是传递局部全局,也就是"* ...

  7. 微信去除 防欺诈盗号请勿支付或输入qq密码 以及 防欺诈或盗号请不要输入qq密码 的方法

    本文介绍如何去除微信顶部的“防欺诈盗号,请勿支付或输入qq密码”.或 “防欺诈或盗号,请不要输入qq密码”如图所示.    一.微信认证 目前只有已经通过微信认证的账号可以去除这个提示.在公众账号下左 ...

  8. Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统 nsswitch.conf配置文件

    Linux就这个范儿 第16章 谁都可以从头再来--从头开始编译一套Linux系统  nsswitch.conf配置文件 朋友们,今天我对你们说,在此时此刻,我们虽然遭受种种困难和挫折,我仍然有一个梦 ...

  9. 30天，O2O速成攻略【7.18广州站】

    活动概况 时间:2015年07月18日13:30-16:30 地点:贝塔咖啡(新港中路TIT创意园内创意西路07号楼) 主办:APICloud.七牛.洪海网络 网址:www.apicloud.com ...

  10. mysql centeros 安装

    http://www.cnblogs.com/xiaoluo501395377/archive/2013/04/07/3003278.html linux mysql允许远程连接 1.登录数据库:my ...