jQuery網站垂直導航標簽tab選項卡切換代碼



186 742 248



特效描述:垂直導航標簽 tab選項卡切換,jQuery個性化工作室站點首頁,垂直導航標簽選項卡切換。

代碼結構

1. 引入JS

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

2. HTML代碼

<div class="mainContainer">
	<div class="navContent">
		<a class="logo" href="#"><img class="logobox" src="images/logo.png"></a>
		<a class="book" href="#">左右微刊</a>
		<a class="box" href="#">聯系我們</a>
		<a class="box01" href="#">左右的文</a>
		<a class="contact"href="#">左右福利</a>
	</div>
	<div class="container">
	  <div class="infoBox">
		<P><span class="status">「左右的工作室」</span>本期招聘職位:本期只招<span class="greenTest">90后</span>,大叔,大姐,抱歉嘍。<br>
		  <span class="friend">&nbsp;&nbsp;&nbsp;&nbsp;友情提示:我們不是招聘指南的搬運工,一下具體職位技能要求,<br>
		  &nbsp;&nbsp;&nbsp;&nbsp;請參見其他公司招聘指南。我們只能形容我們心中的理想對象類型。</span></P>
		<div class="message">
		  <p class="edit">編輯:<br>
			文字好,更懂編好文字。<br>
			自戀,更愛自嘲。<br>
			自由,而不油。想對象類型。</p>
		  <p class="devise">設計:<br>
			愛畫畫,愛拍照,會P圖。<br>
			愛一切與圖有關。<br>
			我們圖什么,圖作品有個性。</p>
		  <p class="publicity">宣傳:<br>
			說話有點,吐槽有點。<br>
			待人處事也很正點。<br>
			對時下年輕人常逛得<br>
			媒體屬性都有涉及,<br>
			不要求你人際寬廣,<br>
			只要求你心里有數。</p>
		  <p class="media">新媒體運營:<br>
			WEIBO豆瓣INSTA知乎<br>
			NICE朋友圈LOFT美拍......<br>
			統統玩轉!<br>
			跟上網友的調子,<br>
			踩得住火爆的槽點。<br>
			有審美的技術控。</p>
		  <p class="plan">活動策劃及執行:<br>
			社會紅人party玩家,<br>
			執行操盤一把手。<br>
			能起范兒,還有人服。<br>
			玩出想法,干得漂亮</p>
		  <p class="world">以上都是各種形容,<br>
			最后三個詞:<br>
			<span>善良,靠譜,主動。</span></p>
		  <p class="job">如果你認為<br>
			這個招聘完全就是寫給你的,<br>
			也許你是我們未來的同事,<br>
			我們可以相約郵箱里見。</p>
		  <a class="joinus" href="#">加入我們</a> </div>
	  </div>
	  <div class="secondInfo">
		<div class="bigTest">
		  <p class="young"><span>左右</span>是一個認真表達年輕人生活狀態和態度的交互平臺。我們用最簡單的方式傳達同時空下的生活體驗和個人價值觀。 <br>
			我們相信只有還原出一個人飽滿的世界,我們才能找到左右為伴的彼此。</p>
		  <p class="fond"><span>左右</span>微刊,發現身邊年輕的人和事。每周3、6上新。微博@左右的工作室</p>
		</div>
		<div class="bannerBox">
		  <div class="firstBanner"> <img src="images/logo_5.png">
			<p>關注左右<br>
			  <span>微信查詢<br>
			  “zuoyouspace”</span></p>
		  </div>
		  <div class="secondBanner"> <img src="images/logo_6.png">
			<p>左右內容<br>
			  <span>點擊右上角<br>
			  查看公共號<br>
			  查看歷史消息</span></p>
		  </div>
		  <div class="thirdBanner"> <img src="images/logo_7.png">
			<p>關注投稿<br>
			  <span>Email投稿至<br>
			  [email protected]</span></p>
		  </div>
		  <div class="fourBanner"> <img src="images/logo_8.png">
			<p>左右招聘<br>
			  <span>Email簡歷作品至<br>
			  [email protected]</span></p>
		  </div>
		</div>
	  </div>
	  <div class="thirdInfo">
		<div class="fontTest">
		  <P class="workRoom">左右的工作室</P>
		  <p class="address">地址:北京<br>
			簡歷及作品發送至:<br>
			[email protected]<br>
			如果你方便也請一并告訴我們你的<br>
			blog、微博、insta、知乎等賬戶。</p>
		</div>
		<div class="map"><img src="images/map.png"></div>
	  </div>
	  <div class="fourInfo">
		<div class="life">
		  <p>左右的陌生人&nbsp;&nbsp;|&nbsp;&nbsp;比編劇更厲害的是生活</p>
		</div>
		<div class="blue"> <img src="images/banner_6.png">
		  <div class="rightBox"> <span>地鐵站外,公交站前,忙碌一天的人們,<br>
			又將沿著各自的軌道回到這個城市某個角落。<br>
			日復一日的畫面,看似每個人都活著同樣的軌跡,<br>
			可每個人在那些角落發生的故事,<br>
			卻有著比影視劇還精彩的橋段。<br>
			別以為編劇厲害,生活比什么都厲害。<br>
			(旁觀者:二師兄)</span>
			<p>左右的陌生人|旁觀者的鏡頭,旁觀者的想。</p>
		  </div>
		</div>
	  </div>
	  <div class="lastInfo">
		<div class="walfareBox">
		  <p class="walfare">左右的福利 | 中秋,給耳朵“貼秋膘”</p>
		  <p class="like">左右首次福利,請使勁兒喜歡。首次試水福利,數量有限,僅此三份,先到先得。<br>
			主持人安琥傾力打造MODRILL二代子彈頭系列AX49耳機。
			《年代秀》錄制現場總裁互贈好禮。<br>
			劉同自己留一副,另外三幅,左右的福利社搶先了。</p>
		  <p class="sangs">你可以帶著它去聽“孤獨”歌單。歌單二維碼都散落在劉同新書《你的孤獨,雖敗猶榮》各個章節里,你倒是掃過沒有啊?</p>
		</div>
		<div class="bottomBox">
		  <div class="photoBox"> <img src="images/banner_1.png"> <img src="images/banner_2.png"> <img src="images/banner_3.png"> <img src="images/banner_4.png"> </div>
		  <div class="attend">
			<p>參與方式:</p>
			<span>1.關注左右的微信:搜索公眾號ID:左右space & 掃描右方二維碼關注;<br>
			2.將左右賬號中任意西黃的內容轉發至朋友圈,并寫上你的感受或西黃的原因,<br>
			&nbsp;&nbsp;&nbsp;截圖在對話框回復給我們;<br>
			3.截止日期:9月18日周四 公布獲獎名單。</span> <img src="images/banner_5.png"> </div>
		</div>
	  </div>
	</div>
</div>



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


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 導航切換 菜單切換 浮動菜單 浮動導航 收縮菜單 收縮導航 右鍵菜單 滑動導航菜單 滑動導航 滑動菜單 滾動導航菜單 滾動菜單 滾動導航 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 滾動切換 滾動條切換 滑動選項卡 滑動切換 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 導航切換 菜單切換 豎直導航 豎直菜單 響應式豎直導航
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

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

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

老夫子电子