两种方法实现TAB菜单及文件操作
1，自定义属性的方法实现----TAB菜单操作
cursor:pointer; 鼠标的小手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.menu{
height:38px;
background-color:#eeeeee;
line-height:38px;
}
.active{
background-color:brown;
}
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 5px;
cursor:pointer;
}
.content{
min-height:100px;
border:1px solid black;
} </style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
</div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
var target=$(this).attr('a');
$('.content').children("[b='"+target+"']").removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
运行结果：
2，索引的方法实现----TAB菜单操作
index：获取索引位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display:none;
}
.menu{
height:38px;
background-color:#eeeeee;
line-height:38px;
}
.active{
background-color:brown;
}
.menu .menu-item{
float:left;
border-right:1px solid red;
padding:0 5px;
cursor:pointer;
}
.content{
min-height:100px;
border:1px solid black;
} </style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item active">菜单一</div>
<div class="menu-item">菜单二</div>
<div class="menu-item">菜单三</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide">内容二</div>
<div class="hide">内容三</div>
</div> </div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function(){
$(this).addClass('active').siblings().removeClass('active');
//var v=$(this).index();
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
});
</script>
</body>
</html>
3. 文件操作
文档处理：
append
prepend
after
before
remove
empty
实例1，添加内容$('#u1').append(temp); 追加内容，往后面加,增加小儿子。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function(){
var v=$('#t1').val();
var temp="<li>"+v+"</li>";
$('#u1').append(temp);
})
</script>
</body>
</html>
运行结果：
4. 往前面加内容。$('#u1').prepend(temp); 增加大儿子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function(){
var v=$('#t1').val();
var temp="<li>"+v+"</li>";
//$('#u1').append(temp);
$('#u1').prepend(temp);
})
</script>
</body>
</html>
效果图：
5.追加它的哥哥和弟弟。$('#u1').before(temp); $('#u1').after(temp);
6.删除操作，让用户填索引号，通过索引号删除。
$('#u1 li').eq(index).empty();只是清空内容，标签还在.
$('#u1 li').eq(index).remove();移除标签，同时内容也就移除了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text"/>
<input id="a1" type="button" value="添加"/>
<input id="a2" type="button" value="删除"/>
<input id="a3" type="button" value="复制"/>
<ul id="u1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function(){
var v=$('#t1').val();
var temp="<li>"+v+"</li>";
//$('#u1').append(temp);
$('#u1').prepend(temp);
})
$('#a2').click(function(){
var index=$('#t1').val();
//$('#u1 li').eq(index).empty();只是清空内容，标签还在.
$('#u1 li').eq(index).remove(); $('#a3').click(function(){
var index=$('#t1').val();
var v=$('#u1 li').eq(index).clone();
$('#u1 li').append(v);
})
</script>
</body>
</html>
两种方法实现TAB菜单及文件操作的更多相关文章
- SQL Server中灾难时备份结尾日志(Tail of log)的两种方法
转自:http://www.cnblogs.com/CareySon/archive/2012/02/23/2365006.html SQL Server中灾难时备份结尾日志(Tail of log) ...
- 怎么在CAD中测量图纸距离？来看看这两种方法
在CAD中设计图纸最重要的就是图纸的尺寸,俗话说也就是图纸间的距离.通过正确的数据设计出的图纸才能够准确,也能够避免施工时事不必要的误差.那怎么在CAD中测量图纸距离呢?具体要怎么来进行操作呢?下面我 ...
- 两种方法上传本地文件到github
https://www.jianshu.com/p/c70ca3a02087 自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的 ...
- 两种方法上传本地文件到github(转)
自从使用github以来,一直都是在github网站在线上传文件到仓库中,但是有时因为网络或者电脑的原因上传失败.最重要的原因是我习惯本地编辑,完成以后再一起上传github.看过了几个教程,总结出最 ...
- [转载]C#读写txt文件的两种方法介绍
C#读写txt文件的两种方法介绍 by 大龙哥 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char ...
- .net中创建xml文件的两种方法
.net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...
- Maven使用第三方jar文件的两种方法
转于http://blog.csdn.net/youhaodeyi/article/details/1729116 主要用于回查与标记 在Maven中,使用第三方库一般是通过pom.xml文件中定义的 ...
- MySQL命令执行sql文件的两种方法
MySQL命令执行sql文件的两种方法 摘要:和其他数据库一样,MySQL也提供了命令执行sql脚本文件,方便地进行数据库.表以及数据等各种操作.下面笔者讲解MySQL执行sql文件命令的两种方法,希 ...
- C#读写txt文件的两种方法介绍
C#读写txt文件的两种方法介绍 1.添加命名空间 System.IO; System.Text; 2.文件的读取 (1).使用FileStream类进行文件的读取,并将它转换成char数组,然后输出 ...
随机推荐
- Mysql取消SSH链接和恢复SSH链接
取消SSH链接//键入密码,链接上mysql mysql -u root -p USE MYSQL; GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIF ...
- Memcached&PHP-Memcache安装配置
参考文档: memcache官网:https://memcached.org/ 参考:http://www.runoob.com/memcached/memcached-install.html 参考 ...
- 20130501-Twitter向全美用户开放广告平台Twitter Ads
腾讯科技讯(晁晖)北京时间5月1日消息,据国外媒体报道,Twitter今天向所有美国用户开放了广告平台Twitter Ads.自2012年3月发布以来,Twitter Ads只向受邀请用户开放.Twi ...
- Web全景图的原理及实现
全景图的基本原理 全景图是一种广角图.通过全景播放器可以让观看者身临其境地进入到全景图所记录的场景中去.比如像是这个.这种看起来很高大上的效果其实背后的原理并不复杂. 通常标准的全景图是一张2:1的图 ...
- Scrum立会报告+燃尽图（十月二十五日总第十六次）
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2284 项目地址:https://git.coding.net/zhang ...
- our team
今天向大家介绍一下我们的团队,首先我们的团队叫“吉祥三宝”当然我们的三宝不是亲子关系,我们是兄弟关系,对,就是这样 下面来介绍一下我们的团队成团吧: 李奇原: 性格开朗.积极乐观.有责任心,擅长团队协 ...
- CS小分队第二阶段冲刺站立会议（5月26日）
昨天成果:对扫雷进行了全面的优化,增加了特色皮肤,为其添加了游戏音效,并且做出了换肤的接口. 今日计划:应队友要求对抽号倒计时器进行分离,修改界面结构以便美化. 遇到问题:扫雷的界面美化比较困难,自动 ...
- tomcat开发环境配置
1.环境配置教程 环境变量.安装版.配置版 2.编写启动tomcat的批处理文件 3.改变端口 4.虚拟目录
- [codecademy]fonts in css
Great job! You learned how to style an important aspect of the user experience: fonts! Let's review ...
- Android 8悬浮窗适配
背景 APP推出时,提示是退出还是更改账号,这个提示框是系统级别的.然而我的Android 9 会崩溃,宁外一个小伙伴Android 7运行理想.报错提示permission denied for w ...