jquery tab键转换

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>jquery实现tab切换-柯乐义</title>

/* 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>

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键转换的更多相关文章

JQuery实现回车代替Tab键(按回车跳到下一栏)
一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...
IAR修改工程名称Tab键设置模板建立
IAR 修改工程名称很多时候用IAR开发都是基于已有工程模板开发的,但是工程模板的名称经常让人头疼:以下是修改办法: 从一个实例工程复制后缀名为"dep,ewd,ewp,eww" ...
html---textarea初始化时就有个table空格以及tab键操作无效
1 初始化时就有一个tab空格 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRnJlZUFwZQ==/font/5a6L5L2T/fontsize/400 ...
jQuery----jquery实现Tab键切换
使用Jquery实现tab键切换,代码简洁易懂,实现逻辑清晰明了.具体总结如下: 需求分析: 鼠标进入tab切换模块,鼠标当前的模块上边框变为红色,并显示对应的商品名称.鼠标离开后,上边框恢复原色,图 ...
source insight 保存时删除多余空格，去除多余空格 space tab键
source insight 保存时删除多余空格,去除多余空格 space tab键摘自:https://blog.csdn.net/lanmanck/article/details/8638391 ...
tab键、快捷键、默认按钮、小数点输入的使用--四则运算
1. 窗体Tab键的顺序设置选中窗体-视图-tab键顺序 label不适用tab键 2. 热键设置和快捷键设置热键:无论光标在哪都可以快捷键:出现界面后才能按添加label 更改label的T ...
python中使用空格还是使用 Tab键缩进的建议
对于程序员来说,其实Tab和空格远远不只是“立场”问题那么简单. 在不同的编辑器里tab的长度可能不一致,所以在一个编辑器里用tab设置缩进后,在其它编辑器里看可能缩进就乱了.空格不会出现这个问题,因 ...
jQuery介绍 DOM对象和jQuery对象的转换与区别
jQuery介绍 DOM对象和jQuery对象的转换与区别 jQuery介绍 jQuery: http://jquery.com/ write less, do more. j ...
给大家分享一个jQuery TAB插件演示
jquery tab选项卡插件示例页面代码,使用jquery.tabs.js轻量级的tab选项卡插件来实现,并支持鼠标滑过.点击.自动切换.数据回调等功能,有的是点击切换,有的是鼠标滑过切换,自带了多 ...

随机推荐

面向对象分析方法(II)
什么是真正的对象? 什么是面向对象分析阶段时的对象? 什么是面向对象设计阶段时的对象? 什么是面向对象实现阶段时的对象? 真正的对象我所理解的真正的对象就是现实生活中客观存在或不存在的真正的对象.这 ...
std::map的clear()没有用?
昨天晚上,我徒弟跑过来讲,他的程序的内存占用居高不下,愿意是std::map的clear()没有效果.于是我让他用erase(begin,end); 试试也不行. 代码如下: void release ...
eclipse for hello world makefile
1. 工程文件分析使用eclipse新建一个Hello World工程,假设工程名称是hello,此时eclipse在工程目录下新建了一个名为hello的文件夹: hello/ .cproject ...
mysql中文乱码问题
1.mysql客户端在插入中文字符的时候可能出现乱码问题. 原因: 要解决字符集的问题,首先要知道现在的系统.数据库.表.客户端等使用什么样的字符集,以及系统支持什么字符集等. 2.我百度了好多,说 ...
Android界面实现----PagerTabStrip绚丽的滑动标签
在ViewPager这种可以滑动的控件上,总是有很多的文章可以做.Android自带的控件,实现一个指示器,这个控件,就是support-v4包里面的PagerTabStrip控件. 首先,我们先看一 ...
Java8 新特性default
在JDK1.8的Iterator接口中 package java.util; import java.util.function.Consumer; public interface Iterator ...
随机数产生random
随机数产生推荐用random(),在产生随机数前要添加种子srandom((unsigned int)time(NULL)). SYNOPSIS #include <stdlib.h> l ...
Oracle Flashback Technologies - 闪回被drop的表
Oracle Flashback Technologies - 闪回被drop的表在oracle10g中,drop一个表后,表没有真正被删除,支持被rename后放在recyclebin中. #新建 ...
并发调用get请求
http://zeusami.iteye.com/blog/1172864 package com.alibaba.xteam.web.travel.module.rpc; import java.i ...

jquery tab键转换

jquery tab键转换的更多相关文章

随机推荐

热门专题