=================================================

================【  选项卡  】=================

=================================================

<!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_选项卡的更多相关文章

  1. 邓_html_图片轮播

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  2. 满堂红CIO邓劲翔：房屋中介突围

    人脸识别.客户关系管理进度监控.业务流程实时监控.网站访问人数及流量实时监控等实际企业应用场景淋漓尽致.羽羽如生的以大屏幕上图表形式展现在人们面前,如果你不去继续询问,你不会知道这是一家才刚刚在房地产 ...

  3. js和jquery实现简单的选项卡

    选项卡切换在做网页的时候经常会用到,以往都是用JQ来实现,代码简单易懂,今天用原生的js实现了一下,二者还是有很大不同的,可以对比一下代码来研究一下. <!DOCTYPE html> &l ...

  4. jQuery的DOM操作实例（1）——选项卡&&Tab切换

    一.原生JavaScript编写tab切换 二.jQuery编写tab切换 在用jQuery编写选项卡过程中,重要的事搞清楚 .eq() 和 .index() 的使用方法. .eq()是jQuery遍 ...

  5. CSS类似微软中国首页的竖向选项卡

    效果体验:http://hovertree.com/texiao/css/24/ 源码下载:http://hovertree.com/h/bjaf/hardklps.htm 代码如下: <!DO ...

  6. Bootstrap之选项卡

    <div class="container"> <!-- nav-tabs作为选项卡头部样式 --> <ul class="nav nav- ...

  7. WinForm中重绘TabControl选项卡标题

    最近开发WinForm频繁使用了TabControl控件,这个控件的选项卡没有BackgroundImage这个属性,那么如何为其各个选项卡添加背景图片呢?(这里说的是每个TabPage的头部,也就是 ...

  8. 简单的jquery选项卡效果

    html部分 <ul class="tab"> <li>最新</li> <li class="cur">热门&l ...

  9. 使用ViewPager+Fragment实现选项卡切换效果

    实现效果 本实例主要实现用ViewPage和Fragment实现选项卡切换效果,选项卡个数为3个,点击选项卡或滑动屏幕会切换Fragment并实现选项卡下方下边框条跟随移动效果. 本程序用androi ...

随机推荐

  1. Android动画(二)-属性动画

    我们在上一篇博客中,讨论了视图动画与帧动画.那么这节课则要讨论更复杂,更强大的Property animation(属性动画). 视图动画使用简单,但是功能也简单.(只有那四种功能).并且也不改变Vi ...

  2. Hyper-V 虚拟网络设置

    目标:搭建一个主机上的网络用来链接主机和虚拟机,并且虚拟机可以通过主机上网. 步骤一:创建一个Internal Network. 步骤二: 创建虚拟机并设置Virtual Switch. 步骤三:将上 ...

  3. robotframework的学习笔记（十二）------DatabaseLibrary 库

    1.安装DatabaseLibrary库 DatabaseLibrary 下载地址:https://pypi.python.org/pypi/robotframework-databaselibrar ...

  4. Java学习笔记12（面向对象五：构造方法、this再探）

    在开发中,经常需要在创建对象的同时明确对象对的属性值, 比如一个Person对象创建时候就应该有age和name等属性 那么如何做到在创建对象的同时给对象的属性初始化值呢? 这里介绍构造方法: 1.构 ...

  5. 深入设计电子计算器(一)——CPU指令集设计

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/8254096.html 作者:窗户 Q ...

  6. smtplib 报错501

    昨天用stmplib写了一个自动发送的邮件的小程序. 之前能够正常运行,到了下午发现报错. 报错信息:smtplib.SMTPSendRefused(501,b'\xc7\xeb\xb5\xc7\xc ...

  7. [搬运] 写给 C# 开发人员的函数式编程

    原文地址:http://www.dotnetcurry.com/csharp/1384/functional-programming-fsharp-for-csharp-developers 摘要:作 ...

  8. Hexo next博客添加折叠块功能添加折叠代码块

    前言 有大段的东西想要放上去,但又不想占据大量的位置.折叠是最好的选择.下面在Hexo的主题上定制添加折叠功能. 本文基于Hexo Next的主题修改.其他主题应该也差不多. 在main.js中添加折 ...

  9. JavaScript闭包的深入理解

    闭包算是javascript中一个比较难理解的概念,想要深入理解闭包的原理,首先需要搞清楚其他几个概念: 一.栈内存和堆内存 学过C/C++的同学可能知道,计算机系统将内存分为栈和堆两部分(大学的基础 ...

  10. 大数据Hadoop学习之搭建Hadoop平台（2.1）

     关于大数据,一看就懂,一懂就懵. 一.简介 Hadoop的平台搭建,设置为三种搭建方式,第一种是"单节点安装",这种安装方式最为简单,但是并没有展示出Hadoop的技术优势,适合 ...