tab切换 以及 jquery追加与移除

原创 2016年08月31日 08:03:44
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>后台文章管理</title>
	<script src='../js/jquery-1.4.4.min.js'></script>
	<script src='../js/ajaxfileupload.js'></script>
</head>
<body>
		
		<h1 align="center">资讯设置</h1>
		<div align="center" id="tab">
			<span><button>基本设置</button></span>
			<span><button>数据添加</button></span>
		</div>
		<div id="contents"> 
			<div align="center" class="cont">
			<form action="article.php" method="post">
			<table>
				<tr>
				<td>模板标题</td>
				<td><input type="text" value="资讯排行" name='title'></td>
				<td><input type="radio" name='is_display' value="on">不显示模板标题</td>
				<td><input type="radio" name='is_display' value="yes">显示模板标题</td>
				</tr>
				<tr>
					<td>显示数量</td>
					<td><input type="text" value="10" name='line'>条</td>
				</tr>
				<tr>
					<td>标题字数</td>
					<td><input type="text" value="6" name='word_number'>字</td>
				</tr>
				<tr>
					<td><input type="submit" name="data" value="保存"></td>
				</tr>
			</table>
			</form>
			</div>
		</div>
		<div id="contents"> 
			<div align="center" class="cont" style="display:none">
			<form action="article.php" method="post" enctype="multipart/form-data">
			<table>
				<tr>
					<td>标题</td>
					<td>内容</td>
					<td>图片</td>
					<td><input type="button" value="新增" id="add"></td>
				</tr>
				<tr id="content" class="he">
					<td><input type="text" name="title[]"></td>
					<td><input type="text" name="content[]"></td>
					<td><input type="file" name="thumb"></td>
					<td><a href="javascript:void(0)" class="del">x</a></td>
				</tr>	
				<tr>
					<td><input type="submit" name="set" value="提交"></td>
				</tr>
			</table>
			</form>
			</div>
		</div>
</body>
</html>
<script>
	//tab切换
	$("#tab span").click(function(){
		var idx=$(this).index();
		$(".cont").hide();
		$("#contents div").eq(idx).show();
	})
	//追加
	$("#add").live("click",function(){
		var tr='';
		tr += '<tr id="content" class="he">'
		tr += '<td><input type="text" name="title[]"></td>'
		tr += '<td><input type="text" name="content[]"></td>'
		tr += '<td><input type="file" name="img[]"></td>'
		tr += '<td><a href="javascript:void(0)" class="del">x</a></td>'
		tr += '</tr>'
		$("#content").after(tr);	
		var str=$(".he").size();
		if(str>9)
		{
			alert("只可以添加10条");
			return false;
		}
	})	
	//移除
	$('.del').live('click',function(){
		var str=$(".del").size();
		if(str<2)
		{
			alert("不能删了");
			return false;
		}
		$(this).parent().parent().remove();
	})
		
</script>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

Delphi7高级应用开发随书源码

  • 2003年04月30日 00:00
  • 676KB
  • 下载

多iframe使用tab标签方式添加、删除、切换的处理实例

紧接着上一篇随笔iframe的内容增高或缩减时设置其iframe的高度的处理方案      如果采用iframe来切换显示内容的方式来展现办公Web。那么需要解决几个问题   1.tab标签需要...

jQuery实现清空table表格除首行外的所有数据

jQuery实现清空table表格除首行外的所有数据

jQuery实现清空table表格除首行以外的数据

1.其实网上有很多版本,试了好几个都不行,最后还是查到了一个非常方便的:不会清除表格第一行表头部分。 其中J_tab_fam是table的id。 [html] view...

jQuery实现tabs(标签页/选项卡)Demo

1. 需要下载的文件 jquery.min.js 2. 效果截图   通过滑动鼠标可以切换不同的tabs,并且显示不同的内容。下面是实现的效果图 3. 代码   html 选项卡 ...

jquery 实现tab选项卡功能

代码示例: ul.tabs { margin: 0; padding: 0; float: left; list-style: none; height: 32px; borde...

js(jquery) tab标签切换 很洋气的奥(⊙_⊙)

$(document).ready(function(){ var tab = $('.tab_y').val(); $(".chou_nav_ul li").clic...

JQuery 样式设置、追加、移除与切换

获取与设置样式 获取class和设置class都可以使用attr()方法来完成。例如使用attr()方法来获取p元素的class,JQuery代码如下: var p_class = $("p")....

tab切换和窗口调整jquery效果

  • 2016年02月29日 10:37
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:tab切换 以及 jquery追加与移除
举报原因:
原因补充:

(最多只允许输入30个字)