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=utf-8" />
<title>TAB特效</title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
</head> <body>
<style type="text/css">
*{padding:0; margin:0;}
ul,ol{list-style-type:none;} body{font-size:12px;}
.tab_box{width:500px; border:1px solid #000; margin:100px auto 0px auto;}
.tab_box ul{width:80px; height:400px; background-color:#eee; display:block; float:left;}
.tab_box ul li{display:block; width:100%; height:40px; line-height:40px; text-align:center; background-color:#bbb; margin-top:10px; cursor:pointer;}
.tab_box ul .tab_one{background-color:#abcdef;}
.tab_span{width:410px; height:400px; overflow:hidden; border:1px solid #000; margin-left:5px; float:right;}
.tab_span_c{width:100%; height:100%; background-color:#ccc; display:none;} </style>
<script type="text/javascript">
$(document).ready(function(){
$(".tab_box .tab_span .tab_span_c:first").css("display","block");
$(".tab_box ul li").click(function(event){
var $btnlistindex = $(this).index();
$(".tab_box .tab_span .tab_span_c").eq($btnlistindex).show().siblings().hide();
$(".tab_box ul li").eq($btnlistindex).addClass("tab_one").siblings().removeClass("tab_one");
});
});
</script>
<div class="tab_box">
<ul>
<li class="tab_one">选项按钮1</li>
<li>选项按钮2</li>
<li>选项按钮3</li>
<li>选项按钮4</li>
<li>选项按钮5</li>
</ul>
<div class="tab_span">
<div class="tab_span_c">
1sadfasdfasdf1sadfasdfasdf1sadfasdfasdf
</div>
<div class="tab_span_c">
2sadfasdfasdf1sadfasdfasdf1sadfasdfasdf
</div>
<div class="tab_span_c">
3sadfasdfasdf1sadfasdfasdf1sadfasdfasdf
</div>
<div class="tab_span_c">
4sadfasdfasdf1sadfasdfasdf1sadfasdfasdf
</div>
<div class="tab_span_c">
5sadfasdfasdf1sadfasdfasdf1sadfasdfasdf
</div>
</div>
</div> </body>
</html>
最终效果如下:
Jquery 简单的Tab选项卡特效的更多相关文章
- jquery简单实现tab选项卡效果
html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...
- jQuery简单的轮播特效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 简单竖向Tab选项卡
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 使用jQuery开发tab选项卡插件
为了复习巩固jQuery的插件开发.HTML和CSS方面的知识,做了一个简单的tab选项卡插件,简单记录一下开发.使用的过程,以备日后使用. 一.插件效果 tab选项卡插件常用的功能均已实现,包括:动 ...
- js 实现tab选项卡
最近一直在研究js 如果不及时复习的话前边学到的东西很快就会忘掉,所以把前段时间的一个简单的tab选项卡的思路写出来也算复习了一下吧, 第一步:先把布局写出来: <div id="d ...
- jQuery实现TAB选项卡切换特效简单演示
本文实例为大家分享jQuery实现TAB选项卡切换特效,供大家参考,具体内容如下 1.tab切换 on ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1 ...
- jQuery Tab选项卡切换代码
jQuery Tab选项卡切换代码是一款简单的jquery tab选项卡切换网页特效代码样式,可以修改tab选项卡相关样式. 代码下载:http://www.huiyi8.com/sc/10863.h ...
- Jquery tab 选项卡 无刷新切换
转载的 演示地址:http://www.freejs.net/demo/29/index.html 首页>>TAB标签>>jquery实现简单的Tab切换菜单(2013-09- ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
随机推荐
- JavaScript 的 Date 最详细解读
基础的 Date() 就不说了~ : ) 如何获得某个月的天数? 不知道大家遇到过这个问题吗?我想如果你们写过日期组件一定有这个问题,我当时的解决方案是这样的: 以下的三个方法,month 参数我都 ...
- 宁波Uber优步司机奖励政策(1月25日~1月31日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Jquery案例——某网站品牌列表的效果
一下是效果图.点击"显示全部品牌",高亮推荐品牌,并显示全部品牌. HTML文件: <!DOCTYPE html> <html lang="en&quo ...
- Transact-SQL 常用函数 分类: SQL Server 2015-02-03 09:47 284人阅读 评论(0) 收藏
(1)DECLARE 两种用法: 1>: DECLARE @usid VARCHAR(50),@usna NVARCHAR(100),@grna NVARCHAR(100); 2>: DE ...
- winform DataGridView 导出到Excel表格 分类: WinForm 2014-07-04 10:48 177人阅读 评论(0) 收藏
public bool ExportDataGridview(DataGridView gridView) { if (gridView.Rows.Count ...
- cocoapods_第二篇
一.什么是CocoaPods CocoaPods是iOS项目的依赖管理工具,该项目源码在Github上管理.开发iOS项目不可避免地要使用第三方开源库,CocoaPods的出现使得我们可以节省设置和第 ...
- php开发工具zendstudio13破解补丁
io? Intelligent Code Editor Robust Debugging Capabilities Eclipse Ecosystem Mobile: AngularJS, Ioni ...
- 开始lisp的旅程
不知道是不是<黑客与画家>的老pual太能忽悠了,一直想把他吹捧的lisp学习一下. 看common lisp和On lisp两本书也有一段时间了,中间还夹着看了一点SICP和land o ...
- 基于Flume的美团日志收集系统(一)架构和设计【转】
美团的日志收集系统负责美团的所有业务日志的收集,并分别给Hadoop平台提供离线数据和Storm平台提供实时数据流.美团的日志收集系统基于Flume设计和搭建而成. <基于Flume的美团日志收 ...
- linux下的僵尸进程处理SIGCHLD信号
什么是僵尸进程? 首先内核会释放终止进程(调用了exit系统调用)所使用的所有存储区,关闭所有打开的文件等,但内核为每一个终止子进程保存了一定量的信息.这些信息至少包括进程ID,进程的终止状态,以及该 ...