tab选项卡

最新推荐文章于 2023-08-11 11:17:42 发布
最新推荐文章于 2023-08-11 11:17:42 发布
阅读量1.9k 收藏
点赞数 1
分类专栏： 杂类 文章标签： 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yuyuntao2003/article/details/9497997
版权
<style type="text/css">
.contentList{width:770px;margin:0 auto;padding:0;}
.contentList .Listbao{margin:0;padding:0; list-style:none;width:770px;height:30px;background:#EAEDF0; }
.contentList .Listbao .List{width:740px;margin:0 auto;background:#EAEDF0;height:30px;padding:0;}
.contentList .Listbao .List li{border: 0 none;color:#666;display: block;float: left;font-size: 14px;height: 30px;line-height: 30px;margin-top: 0;padding:0 5px;width:120px;text-align: center;}
.contentList .Listbao .List .cpuList{width:80px;}
.contentList .Listbao .List li:hover{background-color: #FFFFFF;border-top: 2px solid #E51E20;color: #E51E20;cursor: pointer;margin-top: -2px;}
.contentList .Listbao .List .selected{background-color: #FFFFFF;border-top: 2px solid #E51E20;color: #E51E20;cursor: pointer;margin-top: -2px;}
.contentList .listTable{margin:0 auto;margin-top:20px;table-layout:fixed;border:0px;width:723px; border-left:1px solid #DEDEDE;border-top:1px solid #DEDEDE; text-align:center;}
.contentList .listTable tr td{border-right:1px solid #DEDEDE;border-bottom:1px solid #DEDEDE;padding:0 5px; font-size:12px; color:#555}
.contentList .listTable tr{height:40px;}
.contentList .listTable .listTableTltle{font-size:12px;height:28px; background:#DEEEF5;}
.contentList .rootListHover:hover{ background:#f7f7f7;}
</style>
<script type="text/javascript">
$(document).ready(function(){
     $(".listTable").hide();
$(".listTable:first").show();
  $(".aList").click(function(){
var i=$(this).index(); 
$(".listTable:eq("+i+")").show();
$(".listTable:eq("+i+")").siblings("table").hide();
$(this).addClass("selected");
$(this).siblings().removeClass("selected");
$(this).addClass("selected");
  });   
});
</script>
</head>


<body>
<div class="contentList">
   <div class="Listbao">
     <ul class="List">
        <li class="aList selected">网络流出流量统计</li>
   <li class="cpuList aList">CPU使用率</li>
   <li class="aList">网络流出流量统计</li>
   <li class="aList">网络流入流量统计</li>
   <li class="aList">磁盘读取速率统计</li>
   <li class="aList">磁盘写入速率统计</li>
</ul>
    </div>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称1</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称2</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称3</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称4</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称5</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>
    <table class="listTable" cellpadding="0" cellspacing="0">
      <tr class="listTableTltle">
        <td width="9%">部门名称6</td>
        <td width="9%">设备类型</td>
        <td width="9%">设备名称</td>
        <td width="10%">设备IP</td>
        <td width="14%">实例名称</td>
        <td width="7%">平均值</td>
        <td width="7%">最大值</td>
        <td width="16%">值最后统计时间</td>
      </tr>
       <tr class="rootListHover">
        <td>IT支撑</td>
        <td>物理机</td>
        <td>名称1</td>
        <td>设备IP</td>
        <td>10.XX</td>
        <td>19.2</td>
        <td>20.14</td>
        <td>2013-06-31 13:10:20</td>
      </tr>
    </table>


</div>


透明笔刷：http://www.zcool.com.cn/gfx/ZMjg1Njc2.html


文字特效：
http://www.zcool.com.cn/gfx/ZMjc5MjUy.html
http://www.zcool.com.cn/gfx/ZMjQwMzky.html


云笔刷：
http://www.zcool.com.cn/gfx/ZMjQ4MTI0.html


潮流圆圈：
http://www.zcool.com.cn/gfx/ZMjE1OTE2.html


考勤：
http://ics.chinasoftosg.com/SignOnServlet       
   用户名：工号（不带0） 密码：身份证号后4位



http://download.csdn.net/detail/wwwluo/3621708

yuyuntao2003
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript tab选项卡切换
猿码互联
05-29 452
函数来处理选项卡按钮的点击事件。函数首先隐藏了所有选项卡内容，然后显示当前选项卡的内容。同时，它还在当前选项卡按钮上添加了一个。下面是一个简单的JavaScript代码示例，展示如何使用tab选项卡来切换内容。此示例中，我们使用了一个。
html tab选项卡动画,基于HTML5 Tab选项卡动画切换特效
weixin_42517317的博客
06-03 1312
基于HTML5 Tab选项卡动画切换特效。这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs。效果图如下：实现的代码。html代码：ConnectGiftsBoxesPrintsFun12345(function() {[].slice.call( document.querySelectorAll( '.tabs' ) ).forEach( functio...
经验积累
wangtao6791842的专栏
03-05 3179
virgo :       http://www.eclipse.org/virgo/documentation/virgo-documentation-3.6.1.RELEASE/docs/virgo-user-guide/html/ch13s03.html      http://springsfeng.iteye.com/category/161694      http://geor
中软门户网站
weixin_34384557的博客
11-11 3320
http://ics.chinasoftosg.com/page?presuuid=40289d743f0a2d14013f0a2f8e5c0001 转载于:https://blog.51cto.com/11990649/1871842
Tab选项卡
weixin_44543252的博客
06-09 1003
Tab选项卡 开发工具与关键技术：Visual Studio 2015 作者：徐晶旗 撰写时间：2019年 6月 8日 选项卡是什么呢？选项卡就是点击按钮切换到相应内容，其实就是点击按钮把内容通过display(block none)来实现切换的。下面是我在layui文档中找的一些写tab选项卡的方法实例。 代码的实现： 1. <div class="layui-tab layui-t...
html tab选项卡 控件,Tab选项卡组件
weixin_42522275的博客
06-03 888
Tab选项卡组件Tab组件是根据AppCan 布局框架对数据列表进行封装的JS对象，通过配合的样式，使开发者在界面中可以快速完成选项卡控件的开发。依赖appcan.jsappcan.control.jsappcan.tab.jsappcan.control.cssJS对象函数appcan.tab({参数})selector: /*选择器*/,hasIcon : true or false /...
vue 实现 tab 选项卡
m0_69551472的博客
08-11 660
【代码】vue 实现 tab 选项卡。
html tab选项卡 控件,tab选项卡插件
weixin_33273250的博客
06-03 530
这是一款使用十分方便的、为移动设备定制的、可在水平和垂直两个方向上显示的jQuery和css3响应式tab选项卡插件。在你要显示很多不同的内容时，tab选项卡导航方式是十分有用的。常见的方式是在同一个页面中显示不同的选项，并通过标签可以进行导航。另一个有用的地方是后台管理界面，在这里用户通常需要快速的切换各种管理界面。这个tab选项卡插件的代码是否简单，使用一点CSS和jQuery来切换tabs的...
html 实现tab选项卡
qq_42033668的博客
10-10 4745
【代码】html 实现tab选项卡。
tab选项卡转换html,html5移动端Tab选项卡切换代码
weixin_30045751的博客
05-30 533
特效描述：html5移动端 Tab选项卡切换。html5移动端Tab选项卡切换代码代码结构1. HTML代码Tab1Tab2Tab3Tab41234window.onload = function (){var windowWidth = document.body.clientWidth; //window 宽度;var wrap = document.getElementById('wrap'...
jQuery封装的tab选项卡插件分享
10-24
本文给大家分享的是个人封装的tab选项卡特效的插件，十分的简单实用，附上用法和示例，有需要的小伙伴可以参考下。
Android Tab 选项卡
10-20
在Android开发中，Tab选项卡是一种常见的用户界面设计，它允许用户通过切换不同的Tab来查看或操作不同的内容区域。在本资源"Android Tab 选项卡"中，开发者提供了一个使用`Fragment`实现的Tab切换示例，这对于我们...
AngularJS实现tab选项卡的方法详解
10-19
在AngularJS中，实现tab选项卡功能是一种常见的需求，它能帮助用户更好地组织和展示大量信息。本篇文章将深入探讨如何使用AngularJS实现这一功能，包括基本原理、实现技巧以及注意事项。 首先，AngularJS的核心是...
jQuery简单实现tab选项卡切换效果
10-22
主要介绍使用jQuery封装了一个tab选项卡切换的插件，需要的朋友可以参考下。
asp档案管理系统的设计与实现(源代码+论文).rar
08-10
资源包主要包含以下内容： ASP项目源码：每个资源包中都包含完整的ASP项目源码，这些源码采用了经典的ASP技术开发，结构清晰、注释详细，帮助用户轻松理解整个项目的逻辑和实现方式。通过这些源码，用户可以学习到ASP的基本语法、服务器端脚本编写方法、数据库操作、用户权限管理等关键技术。 数据库设计文件：为了方便用户更好地理解系统的后台逻辑，每个项目中都附带了完整的数据库设计文件。这些文件通常包括数据库结构图、数据表设计文档，以及示例数据SQL脚本。用户可以通过这些文件快速搭建项目所需的数据库环境，并了解各个数据表之间的关系和作用。 详细的开发文档：每个资源包都附有详细的开发文档，文档内容包括项目背景介绍、功能模块说明、系统流程图、用户界面设计以及关键代码解析等。这些文档为用户提供了深入的学习材料，使得即便是从零开始的开发者也能逐步掌握项目开发的全过程。 项目演示与使用指南：为帮助用户更好地理解和使用这些ASP项目，每个资源包中都包含项目的演示文件和使用指南。演示文件通常以视频或图文形式展示项目的主要功能和操作流程，使用指南则详细说明了如何配置开发环境、部署项目以及常见问题的解决方法。 毕业设计参考：对于正在准备毕业设计的学生来说，这些资源包是绝佳的参考材料。每个项目不仅功能完善、结构清晰，还符合常见的毕业设计要求和标准。通过这些项目，学生可以学习到如何从零开始构建一个完整的Web系统，并积累丰富的项目经验。
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习
最新发布
08-10
简历-求职简历-word-文件-简历模版免费分享-应届生-高颜值简历模版-个人简历模版-简约大气-大学生在校生-求职-实习 简历是展示个人经历、技能和能力的重要文档，以下是一个常见的简历格式和内容模板，供您参考： 简历格式： 头部信息：包括姓名、联系方式（电话号码、电子邮件等）、地址等个人基本信息。 求职目标（可选）：简短描述您的求职意向和目标。 教育背景：列出您的教育经历，包括学校名称、所学专业、就读时间等。 工作经验：按时间顺序列出您的工作经历，包括公司名称、职位、工作时间、工作职责和成就等。 技能和能力：列出您的专业技能、语言能力、计算机技能等与职位相关的能力。 实习经验/项目经验（可选）：如果您有相关实习或项目经验，可以列出相关信息。 获奖和荣誉（可选）：列出您在学术、工作或其他领域获得的奖项和荣誉。 自我评价（可选）：简要描述您的个人特点、能力和职业目标。 兴趣爱好（可选）：列出您的兴趣爱好，展示您的多样性和个人素质。 参考人（可选）：如果您有可提供推荐的人员，可以在简历中提供其联系信息。 简历内容模板： 姓名: 联系方式: 地址: 求职目标: （简短描述您的求职意
施耐德ATV61变频器编程手册
08-10
施耐德ATV61变频器编程手册
网页Tab选项卡菜单JS特效实现
"js Tab选项卡特效" 本文将详细介绍如何创建和实现JavaScript（JS）的Tab选项卡特效，以供参考和学习。Tab选项卡是一种常见的用户界面元素，用于组织和展示大量内容，使得页面布局更加清晰，用户可以轻松切换不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值