tab功能菜单??利用tab切换不同的div_html/css_WEB-ITnose

需求：在web界面上实现类型tab页签的效果

aspx界面代码：

Playground

Playground 是一个AI绘画创作和图片编辑平台，每天可以免费创建100张各种类型的艺术图片，还提供背景消除、局部更换等图片编辑工具

下载

  
                                
                                    
                                        
充值
                                        
作废售水
                                        
退水
                                        
换表
                                    
                                
                                
                                    
                                        
补卡
                                        
清除卡
                                        
读卡
                                    
                                
                                
                                    
                                        
                                            
                                                
充值金额：
                                                
                                                                                                        <%----%>元
                                            
                                            
                                                
预存水量：
                                                
                                                                                                        <%-- --%>吨
                                            
                                            
                                                
收取金额：
                                                
元
                                            
                                            
                                                
找零：
                                                
元
                                            
                                            
                                                
                                                    
                                                
                                                    
                                            
                                        
                                    
                                    
作废售水
                                    
退水
                                    
补卡
                                    
清除卡
                                    
换表
                                    
读卡
                                
                            

//控制操作tab的高亮显示 参数(one,索引号：1开始)function setTab(name, cursel) {    for (var i = 1; i <= links_len; i++) {        var menu = document.getElementById(name + i);        var menudiv = document.getElementById("con_" + name + "_" + i);        if (i == cursel) {            menu.className = "off";            menudiv.style.display = "block";        }        else {            menu.className = "";            menudiv.style.display = "none";        }        document.getElementById("hidfTagHistory").value = cursel;    }}

/*----------------tab页签---------------------*/*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.tab1{width:281px;border-top:#aec7e5 solid 1px;border-bottom:#aec7e5 solid 1px; margin-top:20px auto 0 auto;}.menu{height:28px;border-left:#cccccc solid 1px; width:280px;}.menu li{float:left;width:69px;text-align:center;line-height:28px;height:28px;cursor:pointer;border-right:#cccccc solid 1px;color:#666;font-size:14px;overflow:hidden;background:#E0E2EB;}.menu li.off{background:#3385ff;color: White;font-weight:bold;}.menudiv{height:200px;border-left:#cccccc solid 1px;border-right:#cccccc solid 1px;border-top:0;background:#fefefe}.menudiv div{padding:15px;line-height:28px;}/*--------------------按钮--------------------------*/.menudiv input[type="text"]{    width:120px;    height:16px; padding: 4px 2px; float: left;     font: bold 12px 'lucida sans', 'trebuchet MS', 'Tahoma'; border: 1px solid #ccc; box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff; border-radius: 3px;    } .menudiv span {        color:blue;        margin:2px;        height:20px;        line-height:20px;}.lnkBtn{     width: 1024px; margin-left: auto; margin-right: auto;     height:26px;     line-height:26px;     clear:left;     background-color:white;}.lnkBtn a{    margin-left:20px;    font-size:14px;}.lnkBtn a:hover{   color:red;} .lnkBtn a:visited {    color: #9900FF}