Jquery滑动门/tab切换实现方法完整示例
更新时间：2020年06月05日 11:09:16 作者：moqiang02
这篇文章主要介绍了Jquery滑动门/tab切换实现方法,结合完整实例形式分析了Jquery滑动门/tab切换具体操作技巧与页面元素动态操作实现方法,需要的朋友可以参考下
本文实例讲述了Jquery滑动门/tab切换实现方法。分享给大家供大家参考，具体如下：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style>
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
.tab_menu { clear:both;}
.tab_menu li { float:left; text-align:center; cursor:pointer; list-style:none; padding:1px 6px; margin-right:4px; background:#F1F1F1; border:1px solid #898989; border-bottom:none;}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<!-- 引入jQuery -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" >
$(function(){
var $div_li =$("div.tab_menu ul li");
$div_li.click(function(){
$(this).addClass("selected") //当前<li>元素高亮
.siblings().removeClass("selected"); //去掉其它同辈<li>元素的高亮
var index = $div_li.index(this); // 获取当前点击的<li>元素 在 全部li元素中的索引。
$("div.tab_box > div") //选取子节点。不选取子节点的话，会引起错误。如果里面还有div
.eq(index).show() //显示 <li>元素对应的<div>元素
.siblings().hide(); //隐藏其它几个同辈的<div>元素
}).hover(function(){ //添加光标滑入滑出效果
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");
})
})
</script>
</head>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">时事</li>
<li>体育</li>
<li>娱乐</li>
</ul>
</div>
<div class="tab_box">
<div>时事</div>
<div class="hide">体育</div>
<div class="hide">娱乐</div>
</div>
</div>
</body>
</html>
运行结果：
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery页面元素操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery扩展技巧总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关文章
each()函数是基本上所有的框架都提供了的一个工具类函数，通过它，你可以遍历对象、数组的属性值并进行处理。2010-03-03
这篇文章主要介绍了jquery实现简单实用的弹出层效果代码,涉及jquery响应鼠标事件动态操作页面元素属性的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。2010-06-06
本文收藏两种jquery插件：1、图片局部放大2、信息提示框,感兴趣的朋友可以了解下2013-01-01
这篇文章主要介绍了jQuery文字提示与图片提示效果实现方法,涉及jQuery针对鼠标事件的响应与页面元素动态操作相关技巧,需要的朋友可以参考下2016-07-07
这篇文章主要介绍了jQuery实现鼠标划过添加和删除class的方法,涉及jQuery鼠标事件及页面样式的相关操作技巧,需要的朋友可以参考下2015-06-06
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
下面小编就为大家带来一篇对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-04-04
这篇文章主要介绍了jquery实现焦点图片随机切换效果的方法,涉及jQuery插件jquery.easing.1.3.js的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
CSS3 media queries结合jQuery实现响应式导航
这篇文章主要为大家详细介绍了CSS3 media queries结合jQuery实现响应式导航,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
最近，有需要做一个动态的给table，添加行，用了点时间，算是做成了。已测试过，但如果发现有什么bug，可以留言，欢迎拍砖。大家一起进步。2011-03-03
最新评论