蘋果IOS系統開關切換插件



63 251 84



特效描述:蘋果IOS系統 開關切換插件,蘋果IOS系統開關切換插件

代碼結構

1. 引入CSS

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

2. 引入JS

<script src="jquery.min.js"></script>
<script src="index.js"></script>

3. HTML代碼

<div class="search">
	<!--已選類別-->
	<div class="atp_choosed overflow">
		<div class="left title col666">已選類別:</div>
		<div class="left conn" style="width: 780px;"></div>
	</div>
	<!--篩選內容(全部作者)-->
	<div class="scholars-recommend-content att-choose">
		<div class="scholars-choose-box default-box">
			<p class="choose-content left">
				<em>全部作者</em>
				<span>學者姓名1(數量)</span>
				<span>學者姓名2(數量)</span>
				<span>學者姓名3(數量)</span>
				<span>學者姓名4(數量)</span>
			</p>
			<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
				<div class="title left">全部作者</div>
				<ul class="left">
					<li>學者姓名1(數量)</li>
					<li>學者姓名2(數量)</li>
					<li>學者姓名3(數量)</li>
					<li>學者姓名4(數量)</li>
					<li>學者姓名5(數量)</li>
					<li>學者姓名6(數量)</li>
					<li>學者姓名7(數量)</li>
					<li>學者姓名8(數量)</li>
					<li>學者姓名9(數量)</li>
				</ul>
			</div>
			<button class="sch-moreChoose sch-getmore">更多</button>
			<button class="sch-moreChoose">+多選</button>
		</div>
		<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
			<form action="">
				<div class="title left">全部作者</div>
				<ul class="left">
					<li><input type="checkbox">學者姓名1(數量)</li>
					<li><input type="checkbox">學者姓名2(數量)</li>
					<li><input type="checkbox">學者姓名3(數量)</li>
					<li><input type="checkbox">學者姓名4(數量)</li>
					<li><input type="checkbox">學者姓名5(數量)</li>
					<li><input type="checkbox">學者姓名6(數量)</li>
					<li><input type="checkbox">學者姓名7(數量)</li>	
					<li><input type="checkbox">學者姓名8(數量)</li>
					<li><input type="checkbox">學者姓名9(數量)</li>					
				</ul>
				<div class="btns left">
					<p><input type="button" class="sure" value="確定"></p>
					<p><input type="reset" class="false" value="取消"></p>
				</div>
			</form>
		</div>	
	</div>
	<!--篩選內容(全部領域)-->
	<div class="scholars-recommend-content att-choose">
		<div class="scholars-choose-box default-box">
			<p class="choose-content left">
				<em>全部領域</em>
				<span>學科領域1(數量)</span>
				<span>學科領域1(數量)</span>
				<span>學科領域1(數量)</span>
				<span>學科領域1(數量)</span>
			</p>
			<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
				<div class="title left">全部領域</div>
				<ul class="left">
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
					<li>學科領域1(數量)</li>
				</ul>
			</div>
			<button class="sch-moreChoose sch-getmore">更多</button>
			<button class="sch-moreChoose">+多選</button>
		</div>
		<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
			<form action="">
				<div class="title left">全部領域</div>
				<ul class="left">
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>	
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>	
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>
					<li><input type="checkbox">學科領域1(數量)</li>						
				</ul>
				<div class="btns left">
					<p><input type="button" class="sure" value="確定"></p>
					<p><input type="reset" class="false" value="取消"></p>
				</div>
			</form>
		</div>	
	</div>
	<!--篩選內容(全部研究方向)-->
	<div class="scholars-recommend-content att-choose">
		<div class="scholars-choose-box default-box">
			<p class="choose-content left">
				<em>全部研究方向</em>
				<span>研究方向1(數量)</span>
				<span>研究方向2(數量)</span>
				<span>研究方向3(數量)</span>
				<span>研究方向4(數量)</span>
			</p>
			<div class="scholars-choose-box scholars-choose-box2 left seemorebox">
				<div class="title left">全部研究方向</div>
				<ul class="left">
					<li>研究方向1(數量)</li>
					<li>研究方向2(數量)</li>
					<li>研究方向3(數量)</li>
					<li>研究方向4(數量)</li>
					<li>研究方向5(數量)</li>
					<li>研究方向6(數量)</li>
					<li>研究方向7(數量)</li>
					<li>研究方向8(數量)</li>
					<li>研究方向9(數量)</li>
				</ul>
			</div>
			<button class="sch-moreChoose sch-getmore">更多</button>
			<button class="sch-moreChoose">+多選</button>
		</div>
		<div class="scholars-choose-box scholars-choose-box2 choosemorebox">
			<form action="">
				<div class="title left">全部研究方向</div>
				<ul class="left">
					<li><input type="checkbox">研究方向1(數量)</li>
					<li><input type="checkbox">研究方向2(數量)</li>
					<li><input type="checkbox">研究方向3(數量)</li>
					<li><input type="checkbox">研究方向4(數量)</li>
					<li><input type="checkbox">研究方向5(數量)</li>
					<li><input type="checkbox">研究方向6(數量)</li>
					<li><input type="checkbox">研究方向7(數量)</li>	
					<li><input type="checkbox">研究方向8(數量)</li>
					<li><input type="checkbox">研究方向9(數量)</li>					
				</ul>
				<div class="btns left">
					<p><input type="button" class="sure" value="確定"></p>
					<p><input type="reset" class="false" value="取消"></p>
				</div>
			</form>
		</div>	
	</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子