一些实用的TAB效果第1/2页

无标题文档

a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;}
BODY, TD, Select{FONT-SIZE:9pt; FONT-FAMILY:"宋体";}
#TabStrip {width:500px;background-color:#66CCFF;padding:10px;}
#TabStrip #TabCard{width:90%;margin:0px;list-style-type: none;}
#TabStrip #TabCard LI {
float:left;
width:100px;
height:20px;
padding-top:4px;
border:1px #7d7d7d solid;
border-bottom:none;
background-color:#CCC;
text-align:center;
cursor:default;
position:relative;
margin:1px;
}

#TabStrip #TabBody DIV{
display:none;
border:1px #7d7d7d solid;
background-color:#FFF;
width:100%;
height:400px;
padding:5px;
margin-left:2px;
}

function getIE(obj){
var t=obj.offsetTop - obj.parentElement.scrollTop;
var l=obj.offsetLeft - obj.parentElement.scrollLeft;
while(obj=obj.offsetParent){
t+=obj.offsetTop - obj.parentElement.scrollTop;
l+=obj.offsetLeft - obj.parentElement.scrollLeft;
}
return {top: t, left:l}
};

function create_div(){
var div = document.createElement('div');
var b = document.createElement('b');
with(div.style){position = 'absolute';zIndex = '99999';borderTop='1px #FFF solid';width ='98px';height = '1px';pixelTop = '-100';pixelLeft = '-100';}
div.id='_CARD_HR_';
div.appendChild(b);
document.body.insertAdjacentElement('afterBegin', div);
};

function set_tab_card(TabIndex){
var tab = document.getElementById('TabCard');
var bod = document.getElementById('TabBody');
var car = (typeof(TabIndex) != 'object')?tab.children[TabIndex]:TabIndex;
var X_Y = getIE(car);
if(typeof(_CARD_HR_) == 'undefined')create_div();
_CARD_HR_.style.pixelTop = X_Y.top+20;
_CARD_HR_.style.pixelLeft = X_Y.left+1;
for(var i=0; i

  • 用户管理

  • 用户组管理

  • 用户组管理1

测丶式1

测丶式2

测丶式3

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

项目申报

body,td{
font-size:12px;
color:#000000;
background-color:threedface;
vertical-align: middle;
}
.checkbox{width:12px;height:12px;}
.cked{
margin:0px;padding:0px;width:100%;display:block;background-color:highlight;color:highlighttext;
}
.nock{
margin:0px;padding:0px;width:100%;display:block;
}
.tab {
cursor:hand;
border-top:solid thin white;
border-right:solid thin gray;
border-left:solid thin threedface;
font-family:Verdana;
font-size:10pt;
text-align:center;
font-weight:normal}

.selTab { border-left:solid thin white;
border-top:solid thin white;
border-right:solid thin gray;
font-size:10pt;
font-weight:bold;
text-align:center}
.td_no_bottom {
width:100%;
height:100%;
border-color:white;
border-bottom:0}
.td_top_right {
width:100%;
height:100%;
border-color:white;
border-bottom:0;
border-left:0}
.td_no_left {
width:100%;
height:100%;
border-color:white;
border-left:0}
.td_all {
width:100%;
height:100%;
border-color:white}
.title {
font-size:16px;
font-weight:bold;}
.tips {
background-color:transparent;
border:0;
color:#990000;
font-size:14px;}

var menuItem=['1、申报基本信息','2、省技术创新项目申请表','3、技术创新项目立项建议书封面','4、项目开发的目的、意义及必要性','5、国际水平、现状及发展趋势','6、国内产品与技术发展水平、现状','7、项目前期研发及技术准备情况','8、项目产业化实施方案','9、项目进度安排与完成期限','10、技术经济指标','11、项目资金安排情况','12、进口设备仪器情况','13、社会、经济效益评价','14、项目承担单位及项目协作单位情况','15、其它需要说明的问题','格式及填写说明'];

var linkItem=['1.jsp','2.jsp','3.jsp','4.jsp','5.jsp','6.jsp','7.jsp','8.jsp','9.jsp','10.jsp','11.jsp','12.jsp','13.jsp','14.jsp','15.jsp','16.jsp'];
var col=0;

function init(c)
{
if(isNaN(c)) col=0;
else col=Math.floor(c);
win.innerHTML=public_Labels(menuItem);
document.body.onclick=changeTabs;
window.onresize=function(){win.innerHTML=public_Labels(menuItem);}
}

function public_Labels(labels)
{
var html="";
var menus=[];
var menu="";
var base="";
var bases=[];
var row=0;
var row_all=1;
var j=0;
var menu_len=0;
var frame_height=0;

menus[0]='

';
bases[0]='';

for(var i=0;idocument.body.scrollWidth)
{
j++;
menus[j]="

";
bases[j]="";
menu_len=0;
row_all++;
}
if(i==col)
{
menus[j]+="

");
html+=( base );
html+=(" ");
html+=("");
html+=("

"+labels[i]+"";
bases[j]+="

";
row=row_all-1;
}
else
{
menus[j]+="

"+labels[i]+"";
bases[j]+="

";
}
}

for(var i=0;i");
html+=( menu );
html+=("

");
html+=("

");
html+=("

");
html+=(" ");
html+=(" ");
html+=(" ");
html+=("");
return html;
}

function changeTabs()
{

if(window.event.srcElement.className == "tab")
{
col=window.event.srcElement.id.replace(/t/i,'');
win.innerHTML=public_Labels(menuItem);
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

当前1/2页 12下一页阅读全文

(0)

相关推荐

  • 一些实用的TAB效果第1/2页

    无标题文档 a, a:link{text-decoration: none; color:#000000; font-size:9pt;} a:visited{text-decoration: none; color:#000000;} a:hover{text-decoration: underline; color:red;} BODY, TD, Select{FONT-SIZE:9pt; FONT-FAMILY:"宋体";} #TabStrip {width:500px;back

  • bootstrap vue.js实现tab效果

    本文实例为大家分享了bootstrap vue.js实现tab效果的具体代码,供大家参考,具体内容如下 项目目录结构 Student.js代码 function Student(){ this.baseInfo = { tabStatus : true , name : '张三', sex : 'male' } , this.parentsInfo = { tabStatus : false, fatherName : '张全蛋', motherName : '李铁柱' } , this.stu

  • jquery Tab效果和动态加载的简单实例

    一:tab效果显示 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"><head><title>无标题页</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="js/jquery-1.4.2-

  • Android 仿微信底部渐变Tab效果

    先来看一下效果图 除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果 每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使用可以看我的上一篇文章 我将自定义View命名为ShadeView,包含四个自定义属性 意思分别为图标.背景色.底部文本.底部文本大小 <declare-styleable name="ShadeView"> <attr name="icon" for

  • Android Studio使用ViewPager+Fragment实现滑动菜单Tab效果

    本文为大家分享了Android Studio实现滑动菜单Tab效果的具体代码,供大家参考,具体内容如下 描述: 之前有做过一个记账本APP,拿来练手的,做的很简单,是用Eclipse开发的: 最近想把这个APP重新完善一下,添加了一些新的功能,并选用Android Studio来开发: APP已经完善了一部分,现在就想把已经做好的功能整理一下,记录下来. 效果图: 可以手动滑动菜单 也可以通过点击头部菜单进行切换 具体实现的代码: 前台代码(activity_main.xml): <?xml v

  • js tab效果代码增强版

    body { font-family: Arial,"宋体"; font-size:9pt; } td { font-size:12px;; } .mousehand{ cursor:hand; } .titletable{ padding-left:5px; background-color:#E9E9E9; } table.TabBarLevel1{ } table.TabBarLevel1 td{ border:1px solid #CCCCCC; height:20px; ba

  • Jquery 实现Tab效果 思路是js思路

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title

  • js tab效果的实现代码

    预实现效果:(点击不同的tab显示不同面板内容)  一:用到的js函数: 复制代码 代码如下: <script language="javascript" type="text/javascript" > //变换tab函数 //原则,外层div里含有内层多个div function tabPanelEx(trThis,urlImgNormal,urlImgPoint,tabs,tabid){ var tds=trThis.parentNode.chil

  • 微信小程序顶部导航栏滑动tab效果

    小程序商品展示需要导航栏的商品分类进行滑动,供大家参考,具体内容如下 效果图: 首先是滑动的效果: <scroll-view scroll-x="true" style="width: 100%;white-space:nowrap;"> </scroll-view> 小程序使用</scroll-view>,横向移动即可 WXML:这里面我将导航栏显示类目定义为5个,每个20%,当超出5个分类,也就是index>4的时候,导

  • jQuery插件实现非常实用的tab栏切换功能【案例】

    本文实例讲述了jQuery插件实现tab栏切换功能.分享给大家供大家参考,具体如下: 效果: 核心代码:自己写了一个方法,需要用的时候直接调用就可以了. 方法如下: (function ($) { //给$的fn添加方法 $.fn.tabs=function ( options ) { /* { tabHeads:'tab-menu>li', tabHeadsClass:'active', tabBodys:'tab-main>div', tabBodysClass:'selected' }

随机推荐