jQuery网站垂直导航标签tab选项卡切换代码



181 723 242



特效描述:垂直导航标签 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>
			  zuoyou@vip.126.com</span></p>
		  </div>
		  <div class="fourBanner"> <img src="images/logo_8.png">
			<p>左右招聘<br>
			  <span>Email简历作品至<br>
			  zuoyouzhaopon@126.com</span></p>
		  </div>
		</div>
	  </div>
	  <div class="thirdInfo">
		<div class="fontTest">
		  <P class="workRoom">左右的工作室</P>
		  <p class="address">地址:北京<br>
			简历及作品发送至:<br>
			zuoyouzhaopin@126.com<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

加群请备注:从官网了解到