jquery实现tab切换完整代码

代码如下,保存到html文件打开:1234jquery实现tab切换-柯乐义554555657777879808182jQuery83Javascript84

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

jquery实现tab切换完整代码此处内容已经被作者隐藏,请输入验证码查看内容
验证码:
请关注本站微信公众号,回复“”,获取验证码。在微信里搜索“”或者“”或者微信扫描右侧二维码都可以关注本站微信公众号。

代码如下,保存到html文件打开:

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  2 <html xmlns="http://www.w3.org/1999/xhtml">  3 <head>  4 <title>jquery实现tab切换-柯乐义</title>  5 <style type="text/css">  6 /* CSS Document 全局*/  7 *{padding:0;margin:0;}  8 html{border:0;width:100%;}  9 body{font-family:Arail,"宋体",verdana;font-size:12px;line-height:1.5em;color:#666; }  10 img{border:none;}input,select{vertical-align:middle; margin-right:2px;}  11 ol,ul,li {list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}  12 ol, ul {list-style:none outside none;}  13 em{font-style:normal;}  14 a{text-decoration:none;color:#666;}  15 a:hover,a:active{text-decoration:underline;color:#41ABCE;}  16 a:visited{color:#666;}  17 h1{font-size:16px;}h2,h3,h4{font-size:13px;}h5,h6{font-size:12px;}  18 .left{ float:left;}  19 .right{float:right;}  20 .clear{ clear:both; }  21 .Wrap{margin:0 auto 0;overflow:hidden;width:960px;}  22 /*End 全局*/  23  24  25 .seleListCont  26 {  27 clear:both;  28 border-top:1px solid #39B3DA;  29 padding-top:10px;  30 width:200px;  31 }  32  33 .seleList {  34  35 }  36 .seleList li {  37 float:left;  38 line-height:22px;  39 }  40 .seleList li a {  41 line-height:22px;  42 padding:0 10px;  43 }  44 .seleList li.hover {  45 background:none repeat scroll 0 0 #FFFFFF;  46 border-left:1px solid #39B3DA;  47 border-right:1px solid #39B3DA;  48 border-top:1px solid #39B3DA;  49 bottom:-1px;  50 margin-left:5px;  51 position:relative;  52 }  53 </style>  54 </head>  55  56 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>  57 <script type="text/javascript">  58  59 // JavaScript Document  60 /*******************************************************************************  61 * 标题: TAB 选项  62 *******************************************************************************/  63  64 jQuery(function($) {  65 $("#Move ul li").mouseover(function() {  66 var s = $(this).parent().children().index(this); //寻找父级下子元素第几个  67 $(this).parent().children().removeClass("hover"); //寻找父级下子元素的hover Css样式  68 $(this).addClass("hover")  69 $(this).parent().parent().next()  70 .children().hide()  71 .eq(s).show(); //s元素显示  72 });  73  74 })  75  76 </script>  77  78 <body>  79 <div style="width:200px;margin:10px auto;">  80 <div class="seleList" id="Move">  81 <ul>  82 <li class="hover"><a href="javascript:void(0);">jQuery</a></li>  83 <li><a href="javascript:void(0);">Javascript</a></li>  84 </ul>  85 </div>  86 <div class="seleListCont">  87 <ul>  88 <li><a href="http://keleyi.com/a/bjac/etvljevm.htm" target="_blank">jQuery实现固定底部菜单</a></li>  89 <li><a href="http://keleyi.com/a/bjac/ec2s9a4n.htm" target="_blank">一个jQuery ajax瀑布流的例子</a></li>  90 <li><a href="http://keleyi.com/keleyi/" target="_blank">keleyi菜单插件首页</a></li>  91 <li><a href="http://keleyi.com/a/bjac/e7hhwai7.htm" target="_blank">jQ判断子元素是否包含某标签</a></li>  92 <li><a href="http://keleyi.com/a/bjac/bfi2kyi5.htm" target="_blank">jQuery各种事件概述</a></li>  93 <li><a href="http://keleyi.com/a/bjac/xbfftiqj.htm" target="_blank">jq获取下一个元素节点</a></li>  94 <li><a href="http://keleyi.com/a/bjac/fcskag7j.htm" target="_blank">jquery实现a:hover效果</a></li>  95 <li><a href="http://keleyi.com/a/bjac/bqii05en.htm" target="_blank">jQuery拉开关闭帷幕</a></li>  96 <li><a href="http://keleyi.com/a/bjac/c4oc8tyo.htm" target="_blank">弹出菜单jQuery插件</a></li>  97 </ul>  98 <ul style="display: none;">  99 <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> 100 </ul> 101 </div> 102 </div> 103 </body> 104 </html>

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/120769.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • GlideV4 AbstractMethodError解决方案

    GlideV4 AbstractMethodError解决方案昨天升级glide最新包遇到的问题,看了一下官网的解决方案 https://github.com/bumptech/glide集成4.x报错信息java.lang.AbstractMethodError:abstractmethod"voidcom.bumptech.glide.module.RegistersComponents.registerComponents(and…

  • 【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

    【Android动画】之Tween动画 (渐变、缩放、位移、旋转)

  • 什么是词向量?(NPL入门)

    什么是词向量?(NPL入门)什么是词向量?我们组实训选择的主题是与自然语言识别相关的,那么就不得不学习和了解一下自然语言识别中非常重要和基础的。于是我对于自己对词向量的学习进行了以下的总结。简而言之,词向量技术是将词转化成为稠密向量,并且对于相似的词,其对应的词向量也相近。一、词的表示在自然语言处理任务中,首先需要考虑词如何在计算机中表示。通常,有两种表示方式:one-hotrepresenta…

  • 一名正在学习Python的新手。「建议收藏」

    一名正在学习Python的新手。「建议收藏」1.写代码,有如下列表,按照要求实现每一个功能计算列表的长度并输出li=["alex","WuSir","ritian",&q

  • acwing1098. 城堡问题(bfs宽搜)「建议收藏」

    acwing1098. 城堡问题(bfs宽搜)「建议收藏」1 2 3 4 5 6 7 ############################# 1 # | # | # | | # #####—#####—#—#####—# 2 # # | # # # # # #—#####—#####—#####—# 3 # | | # # # # # #—#########—#####–…

  • c++贪吃蛇源代码 完整版

    c++贪吃蛇源代码 完整版c++实现贪吃蛇,完整源码文章结构:数据结构分析程序运行分析难点分析一点思考源代码总结数据结构分析:1.双向队列:这里我才用双向队列的数据结构存储蛇身节点(这里的蛇身节点我才用结构体来存储蛇身信息)(因为贪吃蛇的实现还是比较简单的,所以也只涉及到了这一种数据结构)程序运行分析程序开始用户随机按下w,a,s,d中任意按键开始游戏并且作为蛇运动的初始方向,然后进入循环持…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号