邓_html_选项卡
=================================================
================【 选项卡 】=================
=================================================
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>呵呵</title>
</head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/19px Arial, Helvetica, sans-serif; color:#666;}
.tab { width:240px;margin:50px;}
/*.tab_menu { clear:both;}*/
.tab_menu li {
float:left;
text-align:center;
cursor:pointer;
list-style:none;
padding:1px 6px;
margin-right:4px;
background:#F1F1F1;
border:1px solid #898989;
border-bottom:none;
}
.tab_menu li.hover { background:#DFDFDF;}
.tab_menu li.selected { color:#FFF; background:#6D84B4;}
.tab_box { clear:both; border:1px solid #898989; height:100px;}
.hide{display:none}
</style>
<body>
<div class="tab">
<div class="tab_menu">
<ul>
<li class="selected">呵呵</li>
<li>啊啊啊啊</li>
<li>嘿嘿</li>
</ul>
</div>
<div class="tab_box">
<div>aaaaaaaa</div>
<div class="hide">bbbbbbbbbb</div>
<div class="hide">ccccccccccc</div>
</div>
</div>
</body>
<script type="text/javascript" >
$(function(){
$('div.tab_menu li').click(function(){
// alert(111);
var index=$('div.tab_menu li').index(this);
console.log(index);
$(this).addClass('selected').siblings().removeClass('selected');
$('div.tab_box>div').eq(index).show().siblings().hide();
});
$('div.tab_menu li').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
})
</script>
</html>
邓_html_选项卡的更多相关文章
- 邓_html_图片轮播
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 满堂红CIO邓劲翔：房屋中介突围
人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...
- js和jquery实现简单的选项卡
选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...
- jQuery的DOM操作实例（1）——选项卡&&Tab切换
一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...
- CSS类似微软中国首页的竖向选项卡
效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...
- Bootstrap之选项卡
<div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...
- WinForm中重绘TabControl选项卡标题
最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...
- 简单的jquery选项卡效果
html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...
- 使用ViewPager+Fragment实现选项卡切换效果
实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...
随机推荐
- 封装简单的equery
/** * Created by wang on 2016/3/23. */ //绑定操作 function bindEvent(obj,events,fn){ if (obj.addEventLis ...
- JavaScript的DOM编程--11--插入节点
插入节点: 1). insertBefore(): 把一个给定节点插入到一个给定元素节点的给定子节点的前面 var reference = element.insertBefore(newNode,t ...
- C#保留2位小数的做法
第一 算法实现 保留两位的话,就用一个浮点型先乘以100,然后取整,取整完了之后,再乘以1.0,然后再除以100. 上面这种做法是保留n位,不会四舍五入的.因为这 ...
- python科学计算_numpy_线性代数/掩码数组/内存映射数组
1. 线性代数 numpy对于多维数组的运算在默认情况下并不使用矩阵运算,进行矩阵运算可以通过matrix对象或者矩阵函数来进行: matrix对象由matrix类创建,其四则运算都默认采用矩阵运算, ...
- mac os x使用Git和bitbucket
简而言之,Git是一个分布式的代码版本管理工具.类似的常用工具还有SVN,CVS. Git相比SVN,CVS,最大的特点也是优点在于提供分布式的代码管理.这不是说SVN等不具有该功能,但就目前来看,G ...
- File API文件操作之FileReader二
上一篇说了FileAPI中FileReader的readAsText,这里继续上文,说说另外一个API readAsDataURL. 这个接口是将File或者Blob读成base64格式的字符串,然后 ...
- Python爬虫知识点一
一.入门知识: 1.1.HTTP简介HTTP = HyperText Transfer ProtocolURI = Uniform Resource IdentifierURL = Uniform R ...
- shell脚本的if语句，判断某程序是否存在，不存在启动该程序!
想必大家都知道 "如果......那么......" 这种语法的应用吧! 当然呢,linux下对于这种用法也是有所考虑的,很多时候我们都需要写一个shell脚本,难免会避免if语句 ...
- HTML知识点之表示强调的主要元素
<h1>~<h6> 在HTML中,标题(Heading)元素共有6个级别的标签:<h1>~<h6>.它们都是块级元素.标题数字越小,字体就会越大,标题的 ...
- nginx 的基本配置
安装(mac):关于brew 的问题:http://www.cnblogs.com/adouwt/p/8042201.html brew install nginx 启动: brew servic ...