jQery简单Tab选项卡效果
简单的Tab效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box{
margin: 50px auto;
width: 600px;
height: 500px;
}
ul li{
width: 200px;
height: 50px;
float: left;
list-style: none;
}
#box div{
width: 600px;
height: 450px;
display: none;
}
.li1{
background: blue;
}
.li2{
background: gold;
}
.li3{
background: pink;
}
.div1{
background: blue;
}
.div2{
background: gold;
}
.div3{
background: pink;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//加载后让第一个div先显示出来
$('#box div').eq(0).css('display','block')
$('#box ul li').mouseover(function(){
//将当前移上li的下标对应的div显示，同时将不是ul的同级元素（div）隐藏
$('#box div').eq($(this).index()).css('display','block').siblings().not('ul').css('display','none')
})
})
</script>
</head>
<body>
<div id="box">
<ul>
<li class="li1"></li>
<li class="li2"></li>
<li class="li3"></li>
</ul>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div> </body>
</html>
jQery简单Tab选项卡效果的更多相关文章
- CSS3及JS简单实现选项卡效果（适配手机端和pc端）
想要适配手机端和pc端,有几种简单的方法,本人使用的是百分比分配的方法. *{ padding: 0; margin: 0; } body,html{ width: 100%; height: 100 ...
- jquery简单实现tab选项卡效果
html: <ul class="tab"> <li>最新</li> <li class="cur">热门< ...
- jQuery实现tab选项卡效果小demo
html页面: <section> <h2>Section Title</h2> <ul class="tab-nav"> < ...
- 微信小程序的wx-charts插件-tab选项卡
微信小程序的wx-charts插件-tab选项卡 效果: //index.js var wxCharts = require('../../utils/wxcharts-min.js'); const ...
- 面向对象的tab选项卡实现
利用最基础的面向对象的思想,实现tab选项卡效果: 效果截图:
- 微信小程序实例：实现tabs选项卡效果
最近微信应用号是炒的如火如荼,热门满满,但是也可以发现搜索关键词出来,各类网站出现的还都是微信的官方文档解释.正好赶上这个热潮,这几天先把小程序技术文档看了个遍,就直接着手写案例了.很多组件微信内部已 ...
- jquery 选项卡切换、选项卡封装、简单的jquery选项卡封装、tab切换效果
相信选项卡切换是大家常用的效果单独写一个选项卡切换很方便但是要是一个页面出现多个选项卡不做封装的话会显得代码很杂乱 <div class="bodyCenter"> & ...
- 基于CkEditor实现.net在线开发之路（4）快速布局，工具箱，模板载入，tab选项卡简单说明与使用
上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...
- jquery写的tab切换效果 非常简单
自己写的一款 tab切换效果,比较简单,适合新手 <style type="text/css">*{margin:0; padding:0; font-size:12p ...
随机推荐
- python知识点 07-11
python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 python的 nonlocal关键字用来在函数或其他作用域中使用 ...
- [置顶] 2013 Multi-University Training Contest 8
1003 Mine 简单sg的博弈题,我们走入了nim博弈的误区,后来发现改了三四个字符就过了....我只能说我是sbsbsbsbsbsb...判奇偶啊... #pragma comment(link ...
- Codeforces 719 E. Sasha and Array (线段树+矩阵运算)
题目链接:http://codeforces.com/contest/719/problem/E 题意:操作1将[l, r] + x; 操作2求f[l] + ... + f[r]; 题解:注意矩阵可以 ...
- Codeforces 712 D. Memory and Scores (DP+滚动数组+前缀和优化)
题目链接:http://codeforces.com/contest/712/problem/D A初始有一个分数a,B初始有一个分数b,有t轮比赛,每次比赛都可以取[-k, k]之间的数,问你最后A ...
- HDU 3586 Information Disturbing (二分+树形dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3586 给定n个敌方据点,1为司令部,其他点各有一条边相连构成一棵树,每条边都有一个权值cost表示破坏 ...
- Delphi中GUID相等检查中经典指针应用
type PGUID = ^TGUID; TGUID = packed record D1: LongWord; D2: Word; D3: Word; D4: array[0..7] of Byte ...
- 如何在C#中模拟C++的联合（Union）？[C#, C++] How To Simulate C++ Union In C#?
1 什么是联合? 联合(Union)是一种特殊的类,一个联合中的数据成员在内存中的存储是互相重叠的.每个数据成员都在相同的内存地址开始.分配给联合的存储区数量是“要包含它最大的数据成员”所需的内存数. ...
- socket 连接，使得地址马上可以重用
/* 使地址马上可以重用 */ ...
- sql server 2005全角与半角字符转换
CREATE FUNCTION D_ByteExchangeS_Byte(@str NVARCHAR(4000), --要转换的字符串@flag bit --转换标志,0转换 ...
- iOS开发-基本的网络知识
一.HTTP协议的主要特点:(摘自 仰望星空 的博客)重点内容 1. CS模式 2. 简单快速:只需要传送请求方法和路径.(常用方法有GET,HEAD,POST) 3. 灵活:任意对象都可以,类型由C ...