<!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. 关于webform textbox Password 模式

    textbox在这个模式时,如果进行点击按钮或者其他与后台交互的操作,则状态不会保留,既密码框内容会被清空: 这个可以在前台使用 隐藏控件加js获取密码框内容赋值到隐藏控件,点击刷新后通过后台为密码框 ...

  2. Java基础入门 - 标识符及其命名规范

    类名.变量名.方法名都称为标识符 标识符命名规范: 由字母(A-Z或a-z).数字.下划线(_)和美元符($)中的一种或多种组合而成 不可以数字开头 大小写敏感 关键字不能用作标识符 合法标识符如:D ...

  3. springmvc源码分析上之HandlerMapping

    现在企业开发中,必不可少的管理框架就是spring,而与之搭配的也是企业开发中用的最多的MVC框架:Springmvc 关于springmvc原理,请自行百度 HandlerMapping是sprin ...

  4. Asp.Net实现伪静态（通过URLRewriter）

    一.起因 最近一个项目要实现伪静态,之前没接触过,故一切从零开始,开始网上查资料,方法大概有三种,但是我都试了好几个,都失败了.望有建议的博友给点建议,这里我实现了一种方式,是通过微软URLRewri ...

  5. php的yii框架开发总结9

    这一篇讲解怎么实现的自动发邮件的功能,我在网上查了很多资料,很多都是用定时检测来实现的,我试过,效率太低,网站也卡了. 后来就写了一个.bat文件来实现刷新页面,用了windows的定时任务定时来运行 ...

  6. socks v5 协议解析

    socks v5是一种用于代理的协议,就是说client用这种协议与server沟通,让server帮忙代访问remote后再将结果通过此协议返给client,所以一般是涉及到3个端,分别是clien ...

  7. April 14 2017 Week 15 Friday

    Try to be a rainbow in someone's cloud. 当乌云萦绕心头,我愿意成为你的彩虹. Actually there are many rainbows in our l ...

  8. java日期时间Date类

    java.util包提供了Date类来封装当前的日期和时间. Date类提供两个构造函数来实例化Date对象. 第一个构造函数使用当前日期和时间来初始化对象. Date( ) 第二个构造函数接收一个参 ...

  9. Open XML的上传、下载 、删除 ......文件路径

    /// <summary> /// Get download site, if download tempfolder not existed, create it first /// & ...

  10. bzoj4943 [Noi2017]蚯蚓排队

    题面:http://www.lydsy.com/JudgeOnline/upload/Noi2017D1.pdf 正解:字符串$hash$. 我在考场上写了个$map$的$hash$被卡成$40$分, ...