jQuery電商新聞資訊圖文列表tab選項卡切換代碼

jQuery tab新聞資訊圖片列表布局，支持選項卡切換和展開文字列表詳情效果代碼。這是一款實用的多標簽新聞動態(tài)展示布局代碼。

使用方法：

1、head引入css文件

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

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="bg-grey">
	<div class="content">
		<a href="#">
			<h2 class="title">電商學院</h2></a>
		<p class="subtitle">關(guān)注數(shù)商云、關(guān)注互聯(lián)網(wǎng)、關(guān)注電子商務、關(guān)注電商平臺運營</p>
		<div class="tab-block information-tab">
			<div class="tab-buttons ">
				<h3 class="tab-button cur" data-tab="one">電商行業(yè)動態(tài)</h3>
				<h3 class="tab-button" data-tab="two">電商運營技巧</h3>
				<h3 class="tab-button" data-tab="three">電商開發(fā)常見問題 <span class="question-icon"></span></h3>
			</div>
			<div class="tabs">
				<div class="tab-item active" id="tab-one">
					<div class="information-tab">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/1.png" width="500" height="340" alt="共享經(jīng)濟 活該你倒閉！">
							</a>
							<div class="left-bottom">
								<div class="article-title">共享經(jīng)濟 活該你倒閉！</div>
								<div class="article-time">
									[12-26 ]
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head">
										<span class="article-number">1</span>
										<span class="article-title">實體店線下體驗營銷是新零售行業(yè)的風口</span>
										<span class="article-time">[10-14]</span>
									</div>
									<div class="article-content">
										<p>零售行業(yè)最火熱的詞非“新零售”莫屬了，馬云提出“未來，沒有純粹的電子商務，也沒有純粹的線下零售，而是線上線下與物流緊密結(jié)合的新零售時代。”的見解。因此重新定義、設(shè)計的一種思考方式的營銷方法——實體店線下體驗營銷。</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">傳統(tǒng)汽配供應鏈為什么越來越難做？</span>
										<span class="article-time">[10-11]</span>
									</div>
									<div class="article-content">
										<p>傳統(tǒng)代理商機制在過去產(chǎn)品供小于求的時代下產(chǎn)生，現(xiàn)在供過于求，而且是遠遠大于求。</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">2018年快消品B2B行業(yè)預測</span>
										<span class="article-time">[11-17]</span>
									</div>
									<div class="article-content">
										<p>2017年初的時候，劉強東高調(diào)宣布了京東的百萬便利店計劃。8月28日，阿里巴巴零售通也宣稱到2018年年底將覆蓋100萬家小店。再加上中商惠民、易久批、百世店加等行業(yè)先行企業(yè)，2017年于快消品B2B行業(yè)而言，可謂風起云涌。逐近年底，2018年快消品B2B行業(yè)又會出現(xiàn)哪些變化呢？且看著名零售專家鮑躍忠老師對2018年快消品B2B的預測。

										</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">鮑躍忠：實實在在說我關(guān)注的是快消品+B2B</span>
										<span class="article-time">[01-04]</span>
									</div>
									<div class="article-content">
										<p>到底是應該快消品+B2B，還是B2B+快消品，這是兩個模式、兩個方向、兩條道路的問題。</p>
									</div>
								</a>
							</div>

							<div class="article-list">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">快消品市場潛力巨大 開展供應鏈金融正當</span>
										<span class="article-time">[03-16]</span>
									</div>
									<div class="article-content">
										<p>在國家多項利好政策的影響下，供應鏈金融已成為中小微企業(yè)的主要資金融通渠道,并受到了各行各業(yè)的追捧。在此背景下，雁陣科技憑借自身技術(shù)優(yōu)勢、專業(yè)實力及行業(yè)服務經(jīng)驗,為業(yè)內(nèi)核心企業(yè)、B2B平臺提供一站式供應鏈金融解決方案......</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
				<div class="tab-item" id="tab-two">
					<div class="information-tab ">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/2.png" width="500" height="340" alt="網(wǎng)上商城開發(fā)公司開辟社交應用的新商機">
							</a>
							<div class="left-bottom">
								<div class="article-title">網(wǎng)上商城開發(fā)公司開辟社交應用的新商機</div>
								<div class="article-time">
									[02-27 ]
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">1</span>
										<span class="article-title">簡述B2B電子商務訂貨平臺的幾大基本功能</span>
										<span class="article-time">[12-05]</span>
									</div>
									<div class="article-content">
										<p>B2B電商的發(fā)展勢頭非常猛烈，在當下想要成功經(jīng)營一個B2B電商是一件非常具有挑戰(zhàn)的事情，B2B電商訂貨平臺正是企業(yè)鳳凰涅槃的機會，下面數(shù)商云小編就來簡單說說B2B電子商務訂貨平臺的幾大基本功能。</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">電子商務商城網(wǎng)站營銷策略，從產(chǎn)品定價開始</span>
										<span class="article-time">[09-21]</span>
									</div>
									<div class="article-content">
										<p>說到電子商務定價，電商平臺建設(shè)公司【數(shù)商云】開發(fā)經(jīng)理kay表示，不妨充分考慮五大方面：影響定價的因素、產(chǎn)品的目標價格定位，定價的基本策略。</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">制造業(yè)轉(zhuǎn)型，工業(yè)品電商的創(chuàng)新發(fā)展之路</span>
										<span class="article-time">[07-03]</span>
									</div>
									<div class="article-content">
										<p>5月25日，由中國電子商務協(xié)會B2B行業(yè)分會提供戰(zhàn)略指導，B2B行業(yè)專業(yè)媒體托比網(wǎng)主辦的中國首屆“工業(yè)+互聯(lián)網(wǎng)”高峰論壇在上海舉行。本屆高峰論壇以 “新模式、新通路、新變革”為主題......</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">跨境電商平臺搭建之站內(nèi)站外營銷</span>
										<span class="article-time">[09-20]</span>
									</div>
									<div class="article-content">
										<p>跨境電商平臺搭建好之后，跨境電商平臺的站內(nèi)營銷和站外營銷成為很重要的工作部分。相信不少的電商平臺商家可能都沒有站外站內(nèi)營銷的概念，正好今天【數(shù)商云】小編就整理了電子商務平臺建設(shè)的站內(nèi)站外營銷干貨，供給搭建跨境電商平臺解決方案的運營參考。</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">好的商城網(wǎng)站系統(tǒng)需要進行維護</span>
										<span class="article-time">[12-08]</span>
									</div>
									<div class="article-content">
										<p>電商行業(yè)發(fā)展也有一定年頭了，行業(yè)內(nèi)的商城網(wǎng)站也是星羅棋布，各類商城網(wǎng)站充斥者我們的眼球，一個商城網(wǎng)站得以生存總有他的道理，存在即合理，當然一些商城網(wǎng)站逐漸退出了我們的實現(xiàn)，在競爭中被淘汰，那么一個好的商城系統(tǒng)需要對它進行怎么的維護呢？才能保證其...</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
				<div class="tab-item" id="tab-three">
					<div class="information-tab ">

						<div class="information-left">
							<a href="#">
								<img src="statics/images/3.png" width="500" height="340" alt="優(yōu)秀的網(wǎng)上商城系統(tǒng)網(wǎng)站介紹">
							</a>
							<div class="left-bottom">
								<div class="article-title">優(yōu)秀的網(wǎng)上商城系統(tǒng)網(wǎng)站介紹</div>
								<div class="article-time">
									[12-04 ]
								</div>
							</div>
						</div>
						<div class="information-right">
							<div class="article-list current">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">1</span>
										<span class="article-title">如何制作一個電子商務平臺系統(tǒng)？</span>
										<span class="article-time">[11-07]</span>
									</div>
									<div class="article-content">
										<p>大致的流程如下，以電商平臺開發(fā)公司【數(shù)商云】為例子，在實際項目往往會涉及到人與人之間的復雜溝通以及協(xié)作，所以需要有嚴謹?shù)墓芾硪?guī)范以及彈性的流程控制才能達到較高水準的項目質(zhì)量。</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">2</span>
										<span class="article-title">開發(fā)一個電子商務網(wǎng)站，需要運用哪些設(shè)計原則</span>
										<span class="article-time">[03-21]</span>
									</div>
									<div class="article-content">
										<p>隨著目前電子商務網(wǎng)站開發(fā)技術(shù)的迭代，電商網(wǎng)站的交互設(shè)計得到了很大程度的提升，可以認為現(xiàn)在的新型的商城平臺都呈現(xiàn)出交互效果。由此可以引發(fā)一個思考，電商系統(tǒng)網(wǎng)站開發(fā)的交互設(shè)計原則、基礎(chǔ)是什么？</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">3</span>
										<span class="article-title">傳統(tǒng)企業(yè)轉(zhuǎn)型建設(shè)獨立B2C電商平臺_會面臨什么問題？</span>
										<span class="article-time">[09-20]</span>
									</div>
									<div class="article-content">
										<p>傳統(tǒng)企業(yè)電子商務平臺建設(shè)公司【數(shù)商云】市場總監(jiān)在這里分享提出一些B2C企業(yè)內(nèi)部運營（主要是訂單處理流程方面）所面臨的問題：</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">4</span>
										<span class="article-title">什么是社區(qū)電商平臺？社區(qū)電商達人教路</span>
										<span class="article-time">[09-16]</span>
									</div>
									<div class="article-content">
										<p>通過社區(qū)電商達人了解到，最先發(fā)展起社區(qū)電商的是一些物業(yè)，以及擁有社區(qū)資源的企業(yè)。他們有一個共同點都屬于傳統(tǒng)型企業(yè)，想把一個社區(qū)電商平臺運營好。</p>
									</div>
								</a>
							</div>

							<div class="article-list ">
								<a href="#" class="article-link">
									<div class="article-head ">
										<span class="article-number">5</span>
										<span class="article-title">電子商務網(wǎng)店系統(tǒng)開發(fā)，重視要點總結(jié)！</span>
										<span class="article-time">[09-21]</span>
									</div>
									<div class="article-content">
										<p>【數(shù)商云】為企業(yè)定制專屬的電商網(wǎng)站時，發(fā)現(xiàn)很多電商企業(yè)在溝通過程多次強調(diào)要設(shè)計開發(fā)出一個熱點十足，夠噱頭的電商平臺，這類型的電商網(wǎng)站開發(fā)設(shè)計方面確實夠噱頭了，但不是建立在用戶體驗的基礎(chǔ)上，忽略了用戶的感官視角。</p>
									</div>
								</a>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	//tab切換		
	$('.tab-button').click(function() {
		var tab = $(this).data('tab')
		$(this).addClass('cur').siblings('.tab-button').removeClass('cur');
		$('#tab-' + tab + '').addClass('active').siblings('.tab-item').removeClass('active');
	});
	//新聞列表切換
	$('.information-tab .article-list').hover(function() {
		$(this).addClass('current').siblings('.article-list').removeClass('current');
	}, function() {
		$(this).parent('.information-right').find('.article-list:first-of-type').addClass('current').siblings('.article-list').removeClass('current');
	});
</script>

使用聲明

1. 本站所有素材（未指定商用），僅限學習交流。
2. 會員在本站下載的原創(chuàng)商用和VIP素材后，只擁有使用權(quán)，著作權(quán)歸原作者及17素材網(wǎng)所有。
3. 原創(chuàng)商用和VIP素材，未經(jīng)合法授權(quán)，請勿用于商業(yè)用途，會員不得以任何形式發(fā)布、傳播、復制、轉(zhuǎn)售該素材，否則一律封號處理。
4. 本平臺織夢模板僅展示和個人非盈利用途，織夢系統(tǒng)商業(yè)用途請預先授權(quán)。

查看演示下載資源

0 19514 121

軟件 Dreamweaver
格式 HTML
作者玫琳凱
版權(quán) ? 原創(chuàng)商用（獨家） i

版權(quán)聲明

此作品是由17素材網(wǎng)簽約用戶上傳，17素材網(wǎng)擁有版權(quán)；未經(jīng)17素材網(wǎng)書面授權(quán)，請勿作他用。人物肖像，字體及音頻如需商用需第三方額外授權(quán)；

17素材網(wǎng)尊重知識產(chǎn)權(quán)，如知識產(chǎn)權(quán)權(quán)利人認為平臺內(nèi)容涉嫌侵權(quán)，可通過郵件：3264130392@qq.com提出書面通知，我們將及時處理。

網(wǎng)站提供的黨政主題相關(guān)內(nèi)容（國旗、國徽、黨徽...），目的在于配合國家政策宣傳，僅限個人學習分享使用，禁止用于任何廣告和商用目的。