jQuery帶步驟向導選項卡切換代碼



71 282 95



特效描述:jQuery 帶步驟向導 選項卡切換代碼,jQuery帶步驟向導選項卡切換代碼

代碼結構

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link href="assets/css/main.css" rel="stylesheet">
<link href="dist/css/jquery.wizzy.css" rel="stylesheet">

2. 引入JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/js/jquery.wizzy.js"></script>
<script src="assets/js/script.js"></script>

3. HTML代碼

<div class="wrapper">
	<div class="info">
		<h2>Wizzy<span>0.5.2</span></h3>
	</div>
	<!-- Start Wizzy -->
	<div class="wz-wrapper wizzy">
		<div class="wz-inner">
			<div class="wz-header">
				<nav>
					<a href="#">基本</a>
					<a href="#">正常</a>
					<a href="#">高級</a>
					<a href="#">完成</a>
				</nav>
			</div>
			<div class="wz-body">
				<div class="wz-step">
					<p>內容一</p>
				</div>
				<div class="wz-step">
					<p>內容二</p>
				</div>
				<div class="wz-step">
					<p>一個美妙的寧靜占據了我的整個靈魂,就像春天的那些甜蜜的早晨,我全心全意地享受著。我獨自一人,感受到這個地方存在的魅力,這是為我靈魂的幸福而創造的。我很高興,我親愛的朋友,如此專注于寧靜的存在的微妙感覺,我忽略了我的才能。</p>
				</div>
				<div class="wz-step">
					<p>一天早晨,當Gregor Samsa從噩夢中醒來時,他發現自己在床上變成了一個可怕的害蟲。他躺在盔甲上,像往后一樣,如果他稍微抬起頭,他可以看到棕色的腹部,略微圓拱,被拱門分成硬的部分。床上用品幾乎蓋不住它,似乎隨時都可以滑下來。</p>
				</div>
			</div>
			<div class="wz-navigator"></div>
		</div>
	</div>
	<!-- End Wizzy -->
</div>



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


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 滑動星星打分 其他 選項卡自動切換 步驟
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

湖北30选5开奖结果走势图表