QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 選項卡/滑動門 > jQuery新聞列表tab切換布局代碼

双色球七分区旧版分布图表: VIP商用 jQuery新聞列表tab切換布局代碼

jQuery簡潔大氣的新聞資訊列表tab布局,鼠標懸停tab標簽滑動切換代碼。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="css/style.css">

2、head引入js文件

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

3、body引入HTML代碼

<div id="new_box">

	<div class="title_cn">
		<img src="images/tle_bt5.png" width="166" height="41">
	</div>
	
	<div class="new_con">
		<div class="newtel">
			<ul class="new_telst">
				<li class="">公司新聞</li>
				<li class="newon">行業新聞</li>
				<li class="">媒體報道</li>
				<p style="left: 166px;">
					<b></b>
				</p>
			</ul>
			<div class="clear">
			</div>
		</div>
		<div class="new-wrap">
			<!--案例1-->
			<div class="new_lst show" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img1.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下數據2018年端午節放假安排! </a>
					</p>
					<p class="newlf_tx">
						 根據《國務院辦公廳關于2018年部分節假日安排的通知》精神,及我司實際情況,現將2018年端午節放假安排通知如下:
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>13</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據2018年端午節放假安排! </a>
								<span> 根據《國務院辦公廳關于2018年部分節假日安排的通知》精神,及我司實際情況,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>15</span>2018-5
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 記朗玥科技惠州兩日行 </a>
								<span>時間總是在你忙碌中向前跑得飛快?;腥患?018年已至5月,當歇息一番,放空自己</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據五一勞動節放假安排! </a>
								<span> 根據《國務院辦公廳關于2018年部分節假日安排的通知》精神,及我司實際情況,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據泰國游記 </a>
								<span>一提到泰國,或許我們腦海中立刻冒出來詞都是相同的,那大概就是人妖了。其實不然,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-4
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據2018年清明節放假通知安排 </a>
								<span>根據國家國務院法定節假日放假規定,結合公司實際情況。根據公司領導安排,現將20</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>1</span>2018-3
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 機智如你|天下數據邀您備戰元宵節,這... </a>
								<span>明天是正月十五元宵節 ,在這個吉祥的日子里,
天下數據 提前祝所有客戶朋
								</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例2-->
			<div class="new_lst" style="display: block;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img2.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 天下數據:CDN加速技術的特點和優勢 </a>
					</p>
					<p class="newlf_tx">
						現如今大眾對互聯網服務的要求越來越高,對于網站訪問速度的快慢自然會更加在意。雖然帶寬不斷增加,但用戶數量也在不斷增加,受網站服務器的負荷和傳輸距離等因素的影響,響應速度依然需要得到重視。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據:CDN加速技術的特點和優勢 </a>
								<span>現如今大眾對互聯網服務的要求越來越高,對于網站訪問速度的快慢自然會更加在意。雖</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>25</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美國服務器下載速度受那些因素影響? </a>
								<span> 美國服務器帶寬比較大,對于軟件下載或者在線視頻觀看時,下載的速度都會比較快,</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>24</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 從騰訊云宕機看如何提高云服務器安全防... </a>
								<span>騰訊云于今日出現宕機現象,稱監控到廣州區域部分用戶資源訪問失敗,控制臺登錄異常</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>23</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美國服務器可以做視頻網站嗎?有哪些優... </a>
								<span> 美國服務器可以做視頻網站嗎?由于距離的原因,對于中國市場來說,很多人都不會選</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>19</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 視頻網站服務器租用從哪些方面選擇? </a>
								<span>隨著網絡寬帶上的升級,網站也隨著多方面性的發展,在網絡中視頻網站的數量也在呈直</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>18</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 美國服務器適合建哪些企業網站? </a>
								<span>天下數據美國KT服務器沖量抄底特價低至350元/月</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear">
					</div>
				</ul>
			</div>
			<!--案例3-->
			<div class="new_lst" style="display: none;">
				<ul class="new_lst_cn">
					<li class="new_cnlf">
					<p class="newlf_img">
						<img src="images/new_img3.jpg" width="370" height="147">
					</p>
					<p class="newlf_tel">
						<a href="#" target="_blank"> 直銷認證 | 天下數據被授予“201... </a>
					</p>
					<p class="newlf_tx">
						 2018「第十一屆」世界直銷品牌節大會以“向新力 新需求/再出發”為主題,在武漢洲際酒店隆重舉行。
					</p>
					</li>
					<li class="new_cnrf">
					<div class="newrf_lst">
						<dl>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 直銷認證 | 天下數據被授予“201... </a>
								<span> 2018「第十一屆」世界直銷品牌節大會以“向新力 新需求/再出發”為主題,在</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>6</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據聊:直銷企業面臨新機遇和新挑... </a>
								<span>近年來,隨著全球經濟增速放緩,居民消費水平的提高,“互聯網+”的突飛猛進、微商</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>3</span>2018-7
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據榮獲“2018年度品牌信息化... </a>
								<span>恭喜天下數據在第十一屆世界直銷品牌節榮獲“2018年度品牌信息化服務之星”的稱</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>28</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 第十一屆世界直銷品牌節,天下數據品牌... </a>
								<span>第十一屆世界直銷品牌節在武漢五星級酒店——洲際酒店宴會廳拉開了直銷品牌節的節日</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>27</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據受邀參加“2018世界直銷品... </a>
								<span>  2018年6月27日,天下數據應邀出席第十一屆(世界)中國直銷品牌節。中國</span>
							</p>
							</dd>
							<dd>
							<p class="new_rq">
								<span>26</span>2018-6
							</p>
							<p class="newrf_tx">
								<a href="#" target="_blank"> 天下數據:世界杯看直播 不卡頓可以嗎... </a>
								<span>全民直播年代,迎接來了四年一遇的火熱世界杯。因為互聯網的迅速崛起,以及全民直播</span>
							</p>
							</dd>
						</dl>
					</div>
					</li>
					<div class="clear"></div>
				</ul>
			</div>
		</div>
	</div>

</div>

<script type="text/javascript">           
$(document).ready(function(){
	//設計案例切換
	$('.new_telst li').mouseover(function(){
		var liindex = $('.new_telst li').index(this);
		$(this).addClass('newon').siblings().removeClass('newon');
		$('.new-wrap div.new_lst').eq(liindex).fadeIn(150).siblings('div.new_lst').hide();
		var liWidth = $('.new_telst li').width();
		$('.newtel .new_telst p').stop(false,true).animate({'left' : liindex * liWidth + 'px'},300);
	});
	
});
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了