<!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. C#多样式EXECl导出

    sing NPOI.HPSF; using NPOI.HSSF.UserModel; using NPOI.HSSF.Util; using System; using System.Collecti ...

  2. Python开发环境Wing IDE的Blender的Python代码调试技巧

    Wing IDE是一个集成开发环境,可用于开发.测试和调试为Blender编写的Python代码,Blender是一个开源的3 D内容创建系统.Wing IDE提供自动完成.调用提示.强大的调试器.以 ...

  3. nginx-1.12.2编译安装指导

    nginx-1.12.2编译安装 下载源码包 安装 安装后配置 下载源码包 下载地址:http://nginx.org/en/download.html nginx-1.12.2:http://ngi ...

  4. mysql：JDBC url 参数详解

    MySql链接url参数详解 jdbc:mysql://[host:port],[host:port].../[database][?参数名1][=参数值1][&参数名2][=参数值2]... ...

  5. 模仿ArcGIS用Graphics重绘的直方图分级调节器

    using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...

  6. CodeForces 506D Mr. Kitayuta's Colorful Graph

    brute force ? 其实是平方分解.很容易想到的是每一个颜色建一个图,然后并查集维护一下连通性. 问题在于颜色有O(m)种,每种颜色的图点数都是O(n)的,因此并查集的空间只能重复利用. 但是 ...

  7. DOM(三)：querySelector和querySelectorAll

    querySelector()方法querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null. //取得body元素 var body ...

  8. 中期ppt制作

    陀螺仪的使用解释:https://zhuanlan.zhihu.com/p/29244429 手机坐标轴的图片:http://jcjs.siat.ac.cn/ch/reader/create_pdf. ...

  9. SQL随手记

    数据库改名 想要达到的效果,类似于将一个文件[复制粘贴重命名]. 0.首先得断开连接,复制一份备份.然后再连接上,进行下面的操作. 1.在树形上,选中要改名的数据库,右键重命名. 2.还是它,右键,属 ...

  10. sql查询字段值长度判断是否18位

    SELECT * FROM 表名 WHERE LENGTH(字段)= OR 字段为null IS NULL OR 字段为空='' SELECT * FROM 表名 WHERE LENGTH(字段)&g ...