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;
background-color:#E1E1E1;
}
table.TabBarLevel1 td.Selected{
border-bottom-width:0px;
background-color:#ffffff;
}
table.TabBarLevel1 td.Black{
border-left-width:0px;
border-top-width:0px;
border-right-width:0px;
background-color:#FFFFFF;
}
table.Content{
border-left:1px solid #CCCCCC;
border-right:1px solid #CCCCCC;
border-bottom:1px solid #CCCCCC;
}

热门图片   波希米亚   红色黑客   我们  

 正在加载...

function switchTab(tabpage,tabid,action,type){
var oItem = document.getElementById(tabpage);
for(var i=1;i

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

本人在它的基础上添加的内容控制的效果


代码如下:

<script type="text/javascript">
function $(objName)
{

if(document.getElementById)
    {
        return document.getElementById(objName );
    }
    else if(document.layers)
    {
        return eval("document.layers['" + objName +"']");
    }
    else
    {
        return eval('document.all.' + objName);
    }
}
function switchTab(tabpage,tabid,action,type){
    var oItem = $(tabpage);   
    for(var i=1;i<6;i++){
        var x = $(type + 'Tab' + i);    
        //alert(x);
        x.className = "mousehand";
        //var y = x.getElementsByTagName('a');
        //y[0].style.color="#333333";
  }    
    $(tabid).className = "Selected";
    //gethotimagelist(type+'_'+action);
    closeall(action);
    $(action).style.display="block";
}
function closeall(action){
for(var ii=1; ii<5; ii++){
var noclose;
noclose="div"+ii;
if (noclose!=action){
$(noclose).style.display="none";
}
}
}
</script>

赞 (0)

相关推荐

  • javascript写的一个表单动态输入提示的代码

    *{ margin:0px;padding:0px;font-size:12px; } input{ width:100px;height:20px;border:1px solid #ccc; } function tips(id,str){ var l=document.getElementById(id).offsetLeft+120; var t=document.getElementById(id).offsetTop; document.getElementById("tips&qu

  • 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

  • jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换

    已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的,知识是一点一滴积累的,记录是笔财富,来吧,一起学着总结做笔记. 这几天在写后台文章的一些页面,为了能得到更好的交互性,需要做一些效果,js无疑使不二之选,但由于浏览器的兼容性一直差强人意,所以选用jquery框架,通过css样式.dom节点以及自身所带函数就可以实现比较好的用户体验,此案例有三个功能

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • js tab效果的实现代码

    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

  • 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

  • 非常不错的一个JS分页效果代码，值得研究

    本来想用网上找来的分页程序,不过都得做修改,感觉麻烦了,还是自己写一个好了,以后自己用的时候修改就方便了~~大家都多动手,自己写的才是最好的,日后想干什么的,做修改也是很容易的~~顺便也扩充一下自己的代码库~~ 补充一句,cpage是页面计数,应为全局变量,这样可以随处调用它,totalpage是总页数 JS静态分页程序 a:link,a:visited,a:hover,.current,#info{ border:1px solid #DDD; background:#F2F2F2; disp

  • js 弹簧效果代码

    虽然说的是弹簧效果,但实际上要实现的是定点坐标之间的加速和减速移动. 点到点的移动应该都知道怎么做,这里是通过设置滑动对象的left来实现的. 而减速效果,一般的做法是通过用目标值减当前值除以一个系数(一般为正整数),得到一个步长. 然后当前值加上这个步长作为新的当前值,然后反复取值直到当前值等于目标值. 由于这样得到的步长是越来越小的,而步长就是移动的值,所以就做成减速效果. 那如何做加速效果呢? 由于取不到能对应减速步长的加速的步长(或者有方法我想不到),所以我想了个方法, 一开始先把所有减

  • 比较炫的图片播放器 js 焦点效果代码

    图片播放器_图片轮换_焦点效果 #focus_m{position:relative; width:420px; height:384px; background:#133775} .f_img_roll{width:350px; height:300px; position:relative;} .f_img_roll img{position:absolute; left:0; top:0; width:350px; height:300px;} .f_img_tree{position:a

  • js星空效果代码

    星空效果_www.jb51.net ABCD [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 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动画效果代码

    实现的功能:移动,暂停,恢复,停止. 未实现的功能:无法实现单位换算,不能实现颜色渐变(还有很多,有待完善...) 代码中的使用方法如下: 复制代码 代码如下: var $m = $M("divAnimate"); _("btnAnimate").onclick = function(){ this.disabled = true; var that = this; $m.animate({left:"300px",top:"100px

  • JS动画效果代码3

    慢慢来,这次实现了向任意方向扩展! 复制代码 代码如下: <!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>  &l

  • js打字机效果代码

    Type Writea{text-decoration:none} // please keep these lines on when you copy the source // made by: Nicolas - http://www.javascript-page.com var current = 0 var x = 0 var speed = 70 var speed2 = 2000 function initArray(n) { this.length = n; for (var

随机推荐