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="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="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>