jquery的tab栏

0人阅读 评论(0) 收藏 举报
分类:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的tab栏</title>
<script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
<style>
#sidebar-tab {
	border:1px solid #ccf;
	margin-bottom:1.5em;
	overflow:hidden;
	width:235px
}
#tab-title h3 {
	color:#666;
	font-size:15px;
	font-weight:400;
}
#tab-title .selected {
	color:#356aa0;
	border-bottom:0px;
}
/*标题被选中时的样式*/ 
#tab-title span {
	padding:5px 9px 5px 10px;
	border:1px solid #ccf;
	border-right:0px;
	margin-left:-1px;
	cursor:pointer;
}
#tab-content .hide {
	display:none;
}
/*默认让第一块内容显示,其余隐藏*/ 
#tab-content ul {
	padding:5px 10px;
	overflow:hidden;
}
#tab-content ul li {
	padding-top:5px;
	height:20px;
}
</style>
</head>
<body>
<div id="sidebar-tab">
<div id="tab-title">
  <h3><span class="selected">最新评论</span><span>近期热评</span><span>随机文章</span></h3>
</div>
<div id="tab-content">
  <ul>
    <li>1234567890-1</li>
  </ul>
  <ul class="hide">
    <li>1234567890-2</li>
  </ul>
  <ul class="hide">
    <li>1234567890-3</li>
  </ul>
</div>
</div>

<script>
$('#tab-title span').click(function() {
    $(this).addClass("selected").siblings().removeClass(); //removeClass就是删除当前其他类;只有当前对象有addClass("selected");siblings()意思就是当前对象的同级元素,removeClass就是删除; 
    $("#tab-content > ul").hide().eq($('#tab-title span').index(this)).show();
});
</script>

</body>
</html>

查看评论

使用jQuery实现简单的tab栏标签切换

强调下没有CSS样式代码 1.页面结构代码 导航菜单 TAB标签 jquery css多级下拉菜单 多...
  • zhake_
  • zhake_
  • 2017-05-02 14:37:10
  • 1807

jquery+css实现Tab栏切换

本文利用jquery+css实现了简单的tab栏切换
  • u014607184
  • u014607184
  • 2016-09-26 15:18:30
  • 9586

js实现多tab栏切换效果(二)

上篇js实现tab栏切换效果(一)实现了tab栏的切换效果,如果实现多tab栏的切换效果的话,直接用上面的代码会有小bug。不过不用怕,给每个tab栏加一个id唯一标识的话,就没啥问题了。 废话上说...
  • diligentkong
  • diligentkong
  • 2017-01-25 17:30:34
  • 637

简单的tab栏切换及遮罩效果demo

整理了一下工作中用到的tab栏切换和遮罩效果,是用jQuery实现的,供参考,如果不足,欢迎指正~代码部分: Demo...
  • anLazyAnt
  • anLazyAnt
  • 2016-05-20 01:41:26
  • 656

tab栏切换效果:改进代码原理:闭包 (共3步骤)

效果: 1、 2、 3、
  • sinat_36146776
  • sinat_36146776
  • 2016-11-09 19:34:04
  • 640

Jquery mobile tab功能的实现 详细

下面是别人的经验 目前有两种简单的实现方式: 一,jquery mobile 的实现 jquery的tab的实现是通过在各自页面的footer添加tab项实现的,如下: ...
  • q616804668
  • q616804668
  • 2015-02-01 11:26:07
  • 2074

jquery tab菜单切换效果

第一种: li{ display: block; padding: 0; cursor: pointer; float: left; height: 40px; background:...
  • Ragin
  • Ragin
  • 2014-12-18 16:09:42
  • 1221

jQuery实现简单的tab切换

html:          tab1      tab2      tab3      tab4              内容一      内容二      内容三   ...
  • u012637258
  • u012637258
  • 2017-10-08 11:32:03
  • 427

多Tab栏切换

结合前面写Tab栏切换 本文实现多个tab栏切换效果。原理很简单,就是给每一个tab模块增加一个id,这样就可以区分tab模块,以免它们之间相互影响。 效果图: ...
  • pretty_young_thing
  • pretty_young_thing
  • 2016-10-08 09:49:57
  • 801

jquery学习之tab切换及动画效果,涉及animate(),siblings()

tab01
  • dingquanjun_2011
  • dingquanjun_2011
  • 2014-03-11 10:11:09
  • 1692
    个人资料
    持之以恒
    等级:
    访问量: 1万+
    积分: 1544
    排名: 3万+
    文章存档
    最新评论