jQuery動態添加刪除編輯選項卡代碼



251 1002 335



特效描述:jQuery 動態添加刪除 編輯選項卡,jQuery自定義選項卡、添加選項卡、刪除選項卡、編輯選項卡內容等。動態選項卡代碼。

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/index.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/tab.js"></script>

3. HTML代碼

<div class="wrap">
		<!-- 選項卡標題內容 -->
		<div class="wrap-top">
				<div class="tab-left"><<</div>
				<div class="tab-right">>></div>	
				<div class="cont-tab">
						<div class="cont-scroll">
								<li>
									<span>HTML</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>CSS</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>jQuery</span>
									<a href="javascript:void(0)">X</a>
									<div class="line"></div>
								</li>
								<li>
									<span>javascript</span>
									<a href="javascript:void(0)">X</a>
								</li>
						</div>
				</div>
		</div>
		<!-- 選項卡對應內容 -->
		<div class="wrap-content">  HTML</div>
		<div class="wrap-content">  CSS</div>
		<div class="wrap-content">  jQuery</div>
		<div class="wrap-content"> javascript</div>
		<div class="Add">
				<span></span>
				<div class="memu">
					<li class="add-cont">添加內容</li>
					<li class="del-cont">刪除全部</li>
				</div>
		</div>
		<!-- 全屏添加內容遮罩 -->
		<div class="full">
				<div class="full-wrap">
						<div class="full-top"><img src="img/add.png">添加內容<span>X</span></div>
						<!-- 添加選項卡內容 -->
						<div class="full-content">
								<div class="full-inp">
										<span>添加標題:</span>
										<input type="" name="" placeholder="選項卡標題">
								</div>
								<div class="full-inp">
										<span>添加內容:</span>
										<textarea placeholder="選項相應內容"></textarea> 
								</div>
								<div class="full-inp">
										<botton>確 認</botton>
								</div>
						</div>
				</div>
		</div>
		<!-- 全屏修改內容遮罩 -->
		<div class="full-modify">
				<div class="full-wrap">
						<div class="full-top"><img src="img/modify.png">修改內容<span>X</span></div>
						<!-- 添加選項卡內容 -->
						<div class="full-content">
								<div class="full-modi">
										<span>修改標題:</span>
										<input type="" name="" placeholder="">
								</div>
								<div class="full-modi">
										<span>修改內容:</span>
										<textarea placeholder=""></textarea> 
								</div>
								<div class="full-modi">
										<botton>確認</botton>
								</div>
						</div>
				</div>
		</div>
</div>
<!--使用低版本jQuery可以不調用jquery-migrate-1.2.1.min.js-->
<script type="text/javascript">
	$(".wrap").tabs()
</script>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 文本框 text文本框 選項卡自動切換 按鈕控制 表單提交 添加刪除 添加標簽
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子