基于jquery实现最简单的选项卡切换效果
更新时间：2016年05月08日 07:06:42 作者：张杨
这篇文章主要介绍了基于jquery实现最简单的选项卡切换效果的相关资料，具有一定的参考价值，感兴趣的朋友可以参考一下
这个功能在现在的网站中使用较为普遍，就是以选项卡的形式来对一些内容做了分类。，比如下面的天猫商城。
下面的源码是仿照天猫写的一个选项卡，实现起来的效果如下。
主要是利用我们在点击相应板块是触发它的单击事件，在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。
同时利用hover为其添加了鼠标滑过时的效果。
代码：
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<link href="css/style1.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.3.2.min.js"></script>
<title></title>
<script>
$(function () {
var $div_li = $("div.tab_menu ul li");
$div_li.click(function () { //定义了tan_menu对应的单击事件，也就是类别的单击事件。
$(this).addClass("selected")
.siblings().removeClass("selected");
var index = $div_li.index(this);
$("div.tab_box>div").eq(index).show()
.siblings().hide();
}).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>
以上就是本文的全部内容，希望对大家熟练掌握实现选项卡切换的技巧有所帮助。
相关文章
这篇文章主要介绍了jQuery实现的一个tab切换效果，它的特色是内部还嵌有切换,需要的朋友可以参考下2014-08-08
这篇文章主要介绍了jQuery时间戳和日期相互转换操作,结合实例形式分析了jQuery针对日期与时间戳的转换、运算相关操作技巧,需要的朋友可以参考下2018-12-12
jquery计算出left和top,让一个div水平垂直居中的简单实例
下面小编就为大家带来一篇jquery计算出left和top,让一个div水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要介绍了jquery实现点击向下展开菜单项(伸缩导航)效果,通过jquery遍历及匹配页面元素并动态修改页面元素样式实现该功能,需要的朋友可以参考下2015-08-08
今天所要分享的控件是单选按钮，一个基于jquery扩展漂亮的单选按钮——RadioButton，喜欢的朋友可以收藏下2013-11-11
在jquery.1.9以前的版本，可以使用$.browser很轻松的判断浏览器的类型和版本，但是在1.9中和以后的版本中，$.browser已经被删除，下面就介绍一下如何实现此功能，希望能够给需要的朋友带来帮助2016-01-01
这篇文章主要介绍了jquery简单实现幻灯片的方法,核心的js代码只有9行即可实现幻灯切换效果,非常简单实用,需要的朋友可以参考下2015-08-08
jQuery简单实现的HTML页面文本框模糊匹配查询功能完整示例
这篇文章主要介绍了jQuery简单实现的HTML页面文本框模糊匹配查询功能,涉及jQuery事件响应模拟列表框的下拉数据展示与隐藏,以及元素遍历、匹配等相关操作技巧,需要的朋友可以参考下2018-05-05
本篇文章主要介绍了jQuery中Nicescroll滚动条插件的用法，Nicescroll滚动条插件是一个非常强大的基于jQuery的滚动条插件，有需要的可以了解下。2016-11-11
这篇文章主要介绍了jQuery中ready事件用法,实例分析了ready事件的功能、定义及文档加载就绪以后触发的具体使用技巧,需要的朋友可以参考下2015-01-01
最新评论