<!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. Hosted Services+Quartz实现定时任务调度

    背景 之前.net core使用quartz.net时,总感觉非常变扭,百度和谷歌了N久都没解决以下问题,造成代码丑陋,非常不优雅: 1.项目启动时,要立刻恢复执行quartz.net中的任务 2.q ...

  2. c# 调用matlab

    1.返回一个整数 function [ a ] = testReturn( b ) %UNTITLED Summary of this function goes here % Detailed ex ...

  3. c#操作excel的一些记录

    //开启Excel APP            Excel.Application xlApp = new Excel.Application(); //获取程序下bin—>debug下的文件 ...

  4. eclipse 创建 user library 方法

    1.Window - Preferences - Java - Build Path - User Libraries 2.新建 UserLibraries 3. 4.重复上一步依次添加需要的jar文 ...

  5. Java1.7新特性

    1.switch语句支持字符串变量 public String getTypeOfDayWithSwitchStatement(String dayOfWeekArg) { String typeOf ...

  6. instanceof和相关函数

    instanceof:如果左边对象是右边类型所表示类(或任意一子类)的一个实例,则返回true,否则false.判断左边真实类型是不是右边的类或它的派生类. //实例一 Object o= new L ...

  7. Azure IOT 设备固件更新技巧，看这一篇就够了

    嫌长不看版 今天为大家准备的硬菜是:在 Azure IoT 中心创建 Node.js 控制台应用,进行端到端模拟固件更新,为基于 Intel Edison 的设备安装新版固件的流程.通过创建模拟设备应 ...

  8. memcached 的配置及 spymemcached 客户端简单使用

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.同时也可以用作不同系统之间的数据共享.应用比较广泛.下面介绍一下环境的memcached环境的搭建及简单实 ...

  9. 【转】C内存操作函数

    一.malloc/calloc 名称: Malloc/calloc 功能:  动态内存分配函数 头文件: #include <stdlib.h> 函数原形: void *malloc(si ...

  10. 利用Excel导入数据到SAP C4C

    假设要导入一个Account数据到C4C系统. 工作中心Data Workbench,工作中心视图Import,点download metadata: 会下载一个压缩包到本地. 进入文件夹Templa ...