需求:在web实现类型的接口tab标签效应

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvem91eXVqaWUxMTI3/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">

aspx界面代码:

  <div class="tab1" id="tab1">
<div class="menu">
<ul>
<li id="one1" onclick="setTab('one',1)">充值</li>
<li id="one2" onclick="setTab('one',2)">作废售水</li>
<li id="one3" onclick="setTab('one',3)">退水</li>
<li id="one6" onclick="setTab('one',6)">换表</li>
</ul>
</div>
<div class="menu" style="border-top: #cccccc solid 1px;">
<ul>
<li id="one4" onclick="setTab('one',4)">补卡</li>
<li id="one5" onclick="setTab('one',5);clearCardExt();">清除卡</li>
<li id="one7" onclick="setTab('one',7);readCardExt();">读卡</li>
</ul>
</div>
<div class="menudiv">
<div id="con_one_1">
<table>
<tr>
<td>充值金额:</td>
<td>
<input type="text" id="txtRechargeAmount" onblur="getMeterCount()" />
<%--<asp:TextBox ID="txtRechargeAmount" runat="server"></asp:TextBox>--%><span>元</span></td>
</tr>
<tr>
<td>预存水量:</td>
<td>
<input type="text" id="txtPrestoreWater" />
<%-- <asp:TextBox ID="txtPrestoreWater" runat="server"></asp:TextBox>--%><span>吨</span></td>
</tr>
<tr>
<td>收取金额:</td>
<td><span>元</span></td>
</tr>
<tr>
<td>找零:</td>
<td><span>元</span></td>
</tr>
<tr>
<td>
<asp:Button ID="btnNetRecharge" runat="server" Text="网络充值" CssClass="btn" /></td>
<td>
<asp:Button ID="btnRecharge" runat="server" Text="射频卡充值" CssClass="btn" OnClientClick="writeCardExt();return false;" /></td>
</tr>
</table>
</div>
<div id="con_one_2" style="display: none;">作废售水</div>
<div id="con_one_3" style="display: none;">退水</div>
<div id="con_one_4" style="display: none;">补卡</div>
<div id="con_one_5" style="display: none;">清除卡</div>
<div id="con_one_6" style="display: none;">换表</div>
<div id="con_one_7" style="display: none;">读卡</div>
</div>
</div>

js代码:

//控制操作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;
}
}

css代码:

/*----------------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;}
/*--------------------button--------------------------*/
.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
}

注意id的命名是有讲究的,每个li相应着一个div,这样就能够依据点击不通的li显示不同的div,然后js控制li的css显示。让点击li突出。

版权声明:本文博客原创文章,博客,未经同意,不得转载。

tab功能菜单——使用tab之间不同的交换机div的更多相关文章

  1. 标签页tab.js 在栏目之间切换,局部变化

    1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...

  2. 【Little Demo】从简单的Tab标签到Tab图片切换

    Tab标签切换效果是比较流行的一种网站页面布局,视觉表现为美观大方,通过标签展示内容.目前在各大网站都有存在这种效果.例如:淘宝的黄金位置使用Tab标签切换效果,网易新闻等. 1.简单的 Tab 标签 ...

  3. 低版本系统兼容的ActionBar(四)添加Tab+添加自定义的Tab视图+Fragment

    在ActionBar中添加Tab是很有用的技巧.在support V7库的支持下,我们几乎可以用和之前一样的方式来添加Tab,对于Tab来说,我们可以和MenuItem一样,给他定义自己的视图.我这里 ...

  4. 微信小程序自定义tab,多层tab嵌套实现

    小程序最近是越来越火了-- 做小程序有一段时间了,总结一下项目中遇到的问题及解决办法吧. 项目中有个多 tab 嵌套的需求,进入程序主界面下面有两个 tab,进入A模块后,A模块最底下又有多个tab, ...

  5. Vim设置Tab宽度/替换Tab为空格

    用户配置: 在/home/you/.vimrc中添加以下代码后,重启vim即可实现按TAB产生4个空格:set ts=4  (注:ts是tabstop的缩写,设TAB宽4个空格)set expandt ...

  6. jquery 页面滚动tab自动定位,tab与内容对应

    直接上源码,基于jquery写的,可以直接跑起来. 原理是先计算出页面元素对应的高度.页面滚动时计算tab对应的高端区间,设置具体的tab.欢迎指正 下载地址 <!DOCTYPE html> ...

  7. 19 Flutter 自定义AppBar 定义顶部Tab切换 底部Tab结合顶部Tab实现类似头条页面布局(27分36秒)

    Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. t ...

  8. flutter 切换tab后保留tab状态

    前言 最近在用flutter写一个小项目,在写主页面(底部导航栏+子页面)时遇到的一个问题:当点击底部item切换到另一页面, 再返回此页面时会重走它的initState方法(我们一般在initSta ...

  9. angular 实现tab切换(循环输出tab标题及tab下属内容,非direct,非include)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...

随机推荐

  1. meta viewport标签的使用说明(手机浏览缩放控制)

    网页中有这么一句时,在iPhone的浏览器中将以原始大小显示,并不允许缩放. <meta name="viewport" content="width=device ...

  2. 配置QtCreator+CDB远程调试环境(要设置_NT_SYMBOL_PATH和QT_PLUGIN_PATH和Path)

    相关环境信息:开发机Win7 x64.远程机器WinXP.调试器是CDB.Qt版本5.2.1 一.部署远程机器环境 我这里用的是虚拟机(Windows XP),根据你要调试的程序选择安装不同架构的Wi ...

  3. Lucene.Net 2.3.1开发介绍 —— 三、索引(六)

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(六) 2.2 Field的Boost 如果说Document的Boost是一条线,那么Field的Boost则是一个点.怎么理解这个点呢 ...

  4. Lucene.Net 2.3.1开发介绍 —— 三、索引(三)

    原文:Lucene.Net 2.3.1开发介绍 -- 三.索引(三) 3.Field配置所产生的效果 索引数据,简单的代码,只要两个方法就搞定了,而在索引过程中用到的一些类里最简单,作用也不小的就是F ...

  5. poj 1845 POJ 1845 Sumdiv 数学模板

    筛选法+求一个整数的分解+快速模幂运算+递归求计算1+p+p^2+````+p^nPOJ 1845 Sumdiv求A^B的所有约数之和%9901 */#include<stdio.h>#i ...

  6. libuv 初窥--转

    过年了,人都走光了,结果一个人活也干不了.所以我便想找点东西玩玩. 今天想试一下 libev 写点代码.原本在我那台 ubuntu 机器上一点问题都没有,可在 windows 机上用 mingw 编译 ...

  7. Main Memory Object-Relational Database Management System

    Main Memory Object-Relational Database Management System FastDBMain Memory Relational Database Manag ...

  8. C语言数据结构----递归的应用(斐波拉契数列、汉诺塔、strlen的递归算法)

    本节主要说了递归的设计和算法实现,以及递归的基本例程斐波拉契数列.strlen的递归解法.汉诺塔和全排列递归算法. 一.递归的设计和实现 1.递归从实质上是一种数学的解决问题的思维,是一种分而治之的思 ...

  9. Swift - 各种手势检测大全(UIGestureRecognizer及其子类)

    UIGestureRecognizer有许多子类,用于监听一些常见的手势事件,这些子类主要有: 1,UISwipeGestureRecognizer:滑动(快速移动) 1 2 3 4 5 6 7 8 ...

  10. 关于Oralce数据库优化的几点总结

    个人理解,数据库性能最关键的因素在于IO,因为操作内存是快速的,但是读写磁盘是速度很慢的,优化数据库最关键的问题在于减少磁盘的IO,就个人理解应该分为物理的和逻辑的优化, 物理的是指oracle产品本 ...