一个分享个人学习、开发经验的Blog,http://www.joyphper.net

一个通用的JS选项卡代码兼容所有浏览器

posted @ 2010-10-13 15:31 | 阅读:3733 | 评论:0 | 分类: Javascript

 

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>js选项卡”的文章">js选项卡</title> 
<script language="javascript" type="text/javascript"> 
    function NewsChang(obj,thisNum,totalNum){  
        /*  
        obj 元素ID号前缀  
        thisNum 当前元素的ID标识  
        totalNum 总的选项卡数  
        */  
        for(i=1;i<=totalNum;i++){  
            if(i==thisNum){  
                document.getElementById(obj+'_h_'+i).className="select";  
                document.getElementById(obj+'_c_'+i).className="select";  
            }else{  
                document.getElementById(obj+'_h_'+i).className='unselect';  
                document.getElementById(obj+'_c_'+i).className="unselect";  
            }  
        }  
    }  
</script> 
 
<style type="text/css"> 
    .first_s_h a.select{background:#aaa;}  
    .first_s_h a.unselect{background:#fff;}  
    dl.select{display:block;}  
    dl.unselect{display:none;}  
</style> 
</head> 
<div id="first_s" class="webcon"> 
<div class="first_s_l"> 
        <div class="first_s_h"> 
            <a href="#" class="select" id="s1_h_1" onmouseover="NewsChang('s1',1,2)">公示公告</a>     
          <a href="#" class="unselect" id="s1_h_2" onmouseover="NewsChang('s1',2,2)">茶陵县情</a>     
        </div> 
        <dl class="select" id="s1_c_1"> 
            <dt> 
                <tt>县志</tt> 
                <tt>党史</tt> 
                <tt style="border-right:none">年鉴</tt> 
                <div class="clear"></div> 
            </dt> 
            <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd> 
            <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd> 
        </dl> 
        <dl  class="unselect" id="s1_c_2"> 
            <dt> 
                <tt>1</tt> 
                <tt>2</tt> 
                <tt style="border-right:none">3</tt> 
                <div class="clear"></div> 
            </dt> 
            <dd><a href="#">123</a></dd> 
            <dd><a href="#">123</a></dd> 
            <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd> 
            <dd><a href="#">打开扶贫贷款打开管理费东风历</a></dd> 
            <dd><a href="#">打开扶贫贷款打开管理费东风历打开扶贫贷款打开管理费东风历</a></dd> 
        </dl> 
    </div> 
<body> 
</body> 
</html> 

TAG: javascript , php学习 , js选项卡

共有0条评论 发表评论>>

点击换一张验证码