<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
.order_details {
margin-top: 48px;
}

.order_details ul {
margin: 0px;
padding: 0px;
border-bottom: 1px solid #b4b4b4;
position: relative;
cursor: pointer;
}

.order_details ul li {
float: left;
display: block;
width: 150px;
position: absolute;
top: -24px;
text-align: center;
font-size: 17px;
color: #2077d6
}

.order_details .checked {
background-color: #fff;
color: #636363;
border: 1px solid #b4b4b4;
border-bottom: 0;
}

.prepaids {
position: absolute;
left: 75px;
}

.prepaids2 {
position: absolute;
left: 255px;
}

.prepaids3 {
position: absolute;
left: 413px;
}

.hidedomdiv {
display: none
}

.showdomdiv {
display: block;
}

.showsss {
border: 1px solid #2077D6;
text-align: center;
line-height: 100px;
font-size: 40px;
}
</style>
</head>

<body>
<div class="order_details">
<ul>
<li class="fortab prepaids checked">Tab1</li>
<li class="fortab prepaids2">Tab2</li>
<li class="fortab prepaids3">Tab3</li>
</ul>
</div>
<div>
<div class="tablelist showdomdiv showsss">
1
</div>
<div class="tablelist hidedomdiv showsss">
2
</div>
<div class="tablelist hidedomdiv showsss">
3
</div>
</div>
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 改为鼠标移上的事件只需把click改为mousemove
$(".fortab").click(function() {
var number = $(".fortab").index(this);
$(this).addClass("checked");
$(this).siblings().removeClass("checked");
$(".tablelist:eq(" + number + ")").show();
$(".tablelist:eq(" + number + ")").siblings().hide();
});
});
</script>

</html>

table选项卡的更多相关文章

  1. jQuery中$(function() {});问题详解

    $(function() {});是$(document).ready(function(){ })的简写,最早接触的时候也说$(document).ready(function(){ })这个函数是 ...

  2. 使用CSS禁止textarea调整大小功能的方法

    这篇文章主要介绍了使用CSS禁止textarea调整大小功能的方法,禁止可以调整textarea大小功能的方法很简单,使用CSS的resize属性即可,需要的朋友可以参考下 如果你使用谷歌浏览器或火狐 ...

  3. web前端网页特效大全导航列表

    CSS3和Html5 图表与图形 表单验证 导航菜单 table选项卡 视频播放器 日期和时间 返回顶部 图层代码 滚动代码 幻灯片 文字特效 图片放大镜 juqery焦点图 瀑布流 广告悬浮代码 在 ...

  4. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. html利用锚点实现定位代码实例

    本章节介绍介绍一下如何利用锚点实现定位,使用锚点实现定位是html固有的功能,当然比较简单,也实现了基本的功能,但是功能相对简单一些,如果想要实现平滑的定位可以参阅jquery实现的点击页面动画方式平 ...

  6. 富文本文件CKEDITOR增加上传图片功能(.net)

    如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...

  7. 亚马逊的PuTTY连接AWS出现network error connection refused，终极解决方案。

    使用PuTTY连接AWS的时候,一直出现network error connection refused.百度了这个问题,大家都说是SSH要设置成22.但是我已经设置过了,为什么还是遇到这个问题呢? ...

  8. aws中的路由表

    参考官方文档: 由表中包含一系列被称为路由的规则,可用于判断网络流量的导向目的地. 在您的 VPC 中的每个子网必须与一个路由表关联:路由表控制子网的路由.一个子网一次只能与一个路由表关联,但您可以将 ...

  9. LoadRunner配置方案

    1．配置方案运行时设置 选择“Tools”>“Options”.在“Options”对话框有“Run-Time Settings”(运行时设置).“Timeout”(超时).“Run-Time  ...

随机推荐

  1. asp.net 单元测试（转）

    最早接触单元测试是看了极限编程相关资料里边讲的测试驱动开发,然后下载了Nunit研究了一下,但并没产生多大的触动,因为那个时候做的都是些时间紧任务重的事情,对于单元测试的直接感觉就是有可能比较费时间. ...

  2. 批量删除QQ空间说说

    第一步:用电脑打开浏览器登录你的QQ空间 第二步:点击你的说说栏目 第三步:按下电脑的F12键或者点击右上角的菜单一栏,点击开发者工具 第四步:看到右半边屏幕,找到一个叫Console的菜单,并且点击 ...

  3. 微信公众号自动回复_Java

    先声明一下,这是一个maven工程pom文件需要的依赖: <dependency> <groupId>dom4j</groupId> <artifactId& ...

  4. svg用作背景图

    svg用做背景图的几种方式 1. 直接使用 background: url('data:image/svg+xml;charset=utf-8,<svg width="10" ...

  5. vue本地和线上环境（域名）配置

    vue本身为运行脚手架项目自家搭载了一个nodejs后台环境,本地可通过proxyTable来处理跨域问题,但是上线(或生产环境)之后改域名真是一件麻烦的事情,所以进行一些配置. config/ind ...

  6. python模块详解 hashlib

    hashlib模块 用于加密相关的操作,在python3中替代了md5和sha模块,主要提供SHA和MD5算法. MD5 import hashlib m = hashlib.md5() #调用md5 ...

  7. tomcat的相关使用

    tomcat服务器是apache下非常优秀的一款web服务器,当今的互联网企业中90%左右的中小型企业使用的都是tomcat.tomcat在部署项目时有很多很多的解决方案,这些你都清楚吗? 1.同一个 ...

  8. oracle11g在CentOS6.9上启动脚本

    #!/bin/bash# chkconfig:2345 99 10# description: Startup Script for oracle Database# /etc/init.d/orac ...

  9. ARM实验6——ADC实验

    实验内容: 编写ADC程序,通过FS4412开发板上的电位器,改变ADC通道输入的电压值,经过ADC转换的值打印到终端. 实验目的: 熟悉开发环境: 掌握猎户座4412处理器ADC模块的使用和编程. ...

  10. css样式设置高度不定文本垂直居中

    使用css实现文本垂直居中,对于支持display: table的浏览器来说,是比较容易实现的,只需要对外层div设置为table,内层div设置为table-cell,并设置文本垂直居中即可.但对于 ...