用js控制选项卡的隐藏与显示
通过使用ul和div来,借助于jquery来实现选项卡的显示与隐藏
<form action="" method="post">
<div>
<ul>
<li><a id="atab1" class="atab">基基基基</a></li>
<li><a id="atab2" class="atab">本本本本</a></li>
<li><a id="atab3" class="atab">信信信信</a></li>
<li><a id="atab4" class="atab">息息息息</a></li>
<li><a id="atab5" class="atab">哈哈哈哈</a></li>
</ul>
</div>
<div >
<div class="tab" id="tab1" >
</div>
<!-- End #tab1 -->
<div class="tab" id="tab2" >
</div>
<!-- End #tab2 -->
<div class="tab" id="tab3" >
</div>
<!-- End #tab3 -->
<div class="tab" id="tab4" >
</div>
<!-- End #tab4 -->
<div class="tab" id="tab5" >
</div>
<!-- End #tab5 -->
</div>
</form>
<script type="text/javascript">
$(document).ready(function (e) {
$('.tab').each(function (e) {
if (e == 0)
$(this).show();//首次加载的时候默认显示第一个
else
$(this).hide();
});
})
//给每一个atab绑定单击事件
$('.atab').bind('click', function () {
$('.tab').hide();//隐藏所有内容
var attr = $(this).attr('id');
var id = '#' + attr.substring(1, attr.length);
$(id).show();//显示当前选中项
});
</script>
用js控制选项卡的隐藏与显示的更多相关文章
- 如何使用T-SQL备份还原数据库及c#如何调用执行? C#中索引器的作用和实现。 jquery控制元素的隐藏和显示的几种方法。 localStorage、sessionStorage用法总结 在AspNetCore中扩展Log系列 - 介绍开源类库的使用(一) span<T>之高性能字符串操作实测
如何使用T-SQL备份还原数据库及c#如何调用执行? 准备材料:Microsoft SQL Server一部.需要还原的bak文件一只 一.备份 数据库备份语句:user master backup ...
- js控制easyui datagrid列的显示和隐藏
easyui datagrid 列隐藏和显示 $('#grid').datagrid('hideColumn','列field'); //把hideColumn换成showColumn 即为显示列
- jquery控制元素的隐藏和显示的几种方法。
组织略显凌乱,请耐心看! 使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 1.$("#id").show()表示为display:block, $("#i ...
- jquery控制元素的隐藏和显示的几种方法
使用jquery控制div的显示与隐藏,一句话就能搞定,例如: 方法一 显示: $("#id").show()表示为display:block, 隐藏: $("#id&q ...
- 用radio控制<tr>的隐藏和显示问题
jsp页面代码 <tr> <th nowrap="nowrap" width="10%" height="50px" st ...
- JS 控制输入框输入表情emoji 显示在页面上
问题描述: 最近做一个评论回复的功能遇到了用户输入框输入表情,存入数据库的时候转变成了问号??? 起初为了避免这个问题,做了一个过滤表情的控制 var inputText = $('#pinglun' ...
- js设置html区域隐藏和显示
if(message != "指派") { document.getElementById("appoint").style.display="non ...
- js控制TR的显示隐藏
在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,如何控制,本文为大家揭晓 下文分享的一段代码:选择是的按钮就显示身高和体重的文本框的代码.注意:r ...
- js控制TR的显示影藏
在很多现实的场景中,有的文本框我们希望在选择“是”的按钮之后才出现,这就需要js控制TR的隐藏和显示,(div的影藏显示类似) 以下是一段选择是的按钮就显示身高和体重的文本框的代码.注意:ready方 ...
随机推荐
- Protocol Buffer Java实例
大家要先下载protobuffer,在这里: https://code.google.com/p/protobuf/downloads/list 注意,需要下载两个,一个是complier,另外一个是 ...
- Angular学习(7)- 模板2
示例: <!DOCTYPE html> <html ng-app="MyApp"> <head> <title>Study 8< ...
- C语言每日一题之No.1
鉴于在学校弱弱的接触过C,基本上很少编程,C语言基础太薄弱.刚好目前从事的是软件编程,难度可想而知.严重影响工作效率,已无法再拖下去了.为此,痛下决心恶补C语言.此前只停留在看书,光看好像也记不住,C ...
- 多用less命令,不会输入h查看对应的详细文档
在开发项目时候,难免要查看日志排查错误.之前只会用cat , more, less, tac, tail的简单功能, 但在实际工程中还是不够用的,至少效率很低.今天抽空看了下以下的博客,并实际进行了简 ...
- Redis作者谈Redis应用场景(转)
毫无疑问,Redis开创了一种新的数据存储思路,使用Redis,我们不用在面对功能单调的数据库时,把精力放在如何把大象放进冰箱这样的问题上,而是利用Redis灵活多变的数据结构和数据操作,为不同的大象 ...
- iphone Dev 开发实例9:Create Grid Layout Using UICollectionView in iOS 6
In this tutorial, we will build a simple app to display a collection of recipe photos in grid layout ...
- (WF)
Caught: System.InvalidOperationException: The argument of type 'XXX' cannot be used. Make sure that ...
- oracle查看所有表的数据量
源地址:http://blog.csdn.net/zhanggnol/article/details/6683697 select t.table_name,t.num_rows from user_ ...
- [ActionScript 3.0] AS3 获取函数参数个数
function createFunction(param1:String,param2:String,param3:int=0):void { trace(arguments.length);//a ...
- sikuli
1.sikuli和selenium集成问题,用java封装一个方法去操作web页面上的一些无法定位的控件 http://bbs.csdn.net/topics/390720479/ 2.关于Siku ...