基于jQuery实现选项卡效果
更新时间：2017年01月04日 15:50:57 作者：小伍
这篇文章主要为大家详细介绍了基于jQuery实现选项卡效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
选项卡，不多说了，做不做网络的都知道，我学的比较晚，现在发一个选项卡制作的代码
效果下图所示：
源代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta name="keywords" content=" keywords" />
<meta name="description" content="description" />
</head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
body{font-size:13px}
ul,li{margin:0;padding:0;list-style:none}
#menu li{text-align:center;float:left;padding:5px;margin-right:2px;width:50px;cursor:pointer}
#menu li.tabFocus{width:50px;font-weight:bold;background-color:#f3f2e7;border:solid 1px #666;border-bottom:0;z-index:100;position:relative}
#content{width:260px;height:80px;padding:10px;background-color:#f3f2e7;clear:left;border:solid 1px #666;position:relative;top:-1px}
#content li{display:none}
#content li.conFocus{display:block}
</style>
<body>
<script type="text/javascript">
$(function(){
$('#menu li').each(function(index){
$(this).click(function(){
$('#menu li.tabFocus').removeClass('tabFocus');
$(this).addClass('tabFocus');
$('#content li:eq('+index+')').show().siblings().hide();
})
});
});
</script>
<ul id="menu">
<li class="tabFocus">家居</li>
<li>电器</li>
<li>二手</li>
</ul>
<ul id="content">
<li class="conFocus">这是家居的内容</li>
<li>这是电器的内容</li>
<li>这是家居的内容</li>
</ul>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
checkbox:click事件触发span元素内容改变的方法
下面小编就为大家带来一篇checkbox:click事件触发span元素内容改变的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
扩展jQuery EasyUI tree搜索树节点的方法，使其支持节点名称的模糊匹配，将不匹配的节点隐藏。下面通过本文给大家分享jQuery EasyUI tree增加搜索功能,需要的朋友可以参考下2017-04-04
这篇文章主要介绍了jQuery中$.each使用详解,需要的朋友可以参考下2015-01-01
以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下2016-05-05
本章继续我们的JQuery选择器的学习旅程 首先照上一章一样，提供我学习用的例子2009-07-07
这个例子使我更加明白呈现数据是前端工作滴一部分，如何使table中的数值变为清晰地条状图呢？听我细细道来2011-08-08
jqGrid可以动态读取和加载外部数据，本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示，以及可以通过输入关键字查询数据的ajax交互过程2015-12-12
这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Easy Slider 是一个滑动门插件，支持任何图片或内容，当点击时实现横向或纵向滑动。它拥有一系列丰富的参数设置，可通过CSS来进行完全的控制。2010-06-06
jQuery树形插件jquery.simpleTree.js用法分析
这篇文章主要介绍了jQuery树形插件jquery.simpleTree.js用法,结合实例形式分析了jQuery树形菜单插件jquery.simpleTree.js的功能与基本用法,需要的朋友可以参考下2016-09-09
最新评论