利用jQuery實現選項卡步驟向導代碼



12 47 16



特效描述:利用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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



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


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

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子 青海快三福彩 规则 双色球胆拖预测 重庆百变王牌游戏平台 北京pk10技巧公式 25选7中五个号多少钱 365棋牌游戏官方下载 梦幻西游手游 二级加油站 赚钱 中国体育彩票20选5 大奖888游戏平台 荣盛app下载 河南麻将下载安装 共享超市赚钱吗 东方彩票网址 闲来广东麻将v1.5.0