jQuery tab新聞資訊圖片列表布局,支持選項卡切換和展開文字列表詳情效果代碼。這是一款實用的多標(biāo)簽新聞動態(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">電商學(xué)院</h2></a>
<p class="subtitle">關(guān)注數(shù)商云、關(guān)注互聯(lián)網(wǎng)、關(guān)注電子商務(wù)、關(guān)注電商平臺運(yù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">電商運(yùn)營技巧</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)濟(jì) 活該你倒閉!">
</a>
<div class="left-bottom">
<div class="article-title">共享經(jīng)濟(jì) 活該你倒閉!</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è)的風(fēng)口</span>
<span class="article-time">[10-14]</span>
</div>
<div class="article-content">
<p>零售行業(yè)最火熱的詞非“新零售”莫屬了,馬云提出“未來,沒有純粹的電子商務(wù),也沒有純粹的線下零售,而是線上線下與物流緊密結(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)汽配供應(yīng)鏈為什么越來越難做?</span>
<span class="article-time">[10-11]</span>
</div>
<div class="article-content">
<p>傳統(tǒng)代理商機(jī)制在過去產(chǎn)品供小于求的時代下產(chǎn)生,現(xiàn)在供過于求,而且是遠(yuǎn)遠(yuǎ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è)預(yù)測</span>
<span class="article-time">[11-17]</span>
</div>
<div class="article-content">
<p>2017年初的時候,劉強(qiáng)東高調(diào)宣布了京東的百萬便利店計劃。8月28日,阿里巴巴零售通也宣稱到2018年年底將覆蓋100萬家小店。再加上中商惠民、易久批、百世店加等行業(yè)先行企業(yè),2017年于快消品B2B行業(yè)而言,可謂風(fēng)起云涌。逐近年底,2018年快消品B2B行業(yè)又會出現(xiàn)哪些變化呢?且看著名零售專家鮑躍忠老師對2018年快消品B2B的預(yù)測。
</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>到底是應(yīng)該快消品+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">快消品市場潛力巨大 開展供應(yīng)鏈金融正當(dāng)</span>
<span class="article-time">[03-16]</span>
</div>
<div class="article-content">
<p>在國家多項利好政策的影響下,供應(yīng)鏈金融已成為中小微企業(yè)的主要資金融通渠道,并受到了各行各業(yè)的追捧。在此背景下,雁陣科技憑借自身技術(shù)優(yōu)勢、專業(yè)實力及行業(yè)服務(wù)經(jīng)驗,為業(yè)內(nèi)核心企業(yè)、B2B平臺提供一站式供應(yīng)鏈金融解決方案......</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ā)公司開辟社交應(yīng)用的新商機(jī)">
</a>
<div class="left-bottom">
<div class="article-title">網(wǎng)上商城開發(fā)公司開辟社交應(yīng)用的新商機(jī)</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電子商務(wù)訂貨平臺的幾大基本功能</span>
<span class="article-time">[12-05]</span>
</div>
<div class="article-content">
<p>B2B電商的發(fā)展勢頭非常猛烈,在當(dāng)下想要成功經(jīng)營一個B2B電商是一件非常具有挑戰(zhàn)的事情,B2B電商訂貨平臺正是企業(yè)鳳凰涅槃的機(jī)會,下面數(shù)商云小編就來簡單說說B2B電子商務(wù)訂貨平臺的幾大基本功能。</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ù)商城網(wǎng)站營銷策略,從產(chǎn)品定價開始</span>
<span class="article-time">[09-21]</span>
</div>
<div class="article-content">
<p>說到電子商務(wù)定價,電商平臺建設(shè)公司【數(shù)商云】開發(fā)經(jīng)理kay表示,不妨充分考慮五大方面:影響定價的因素、產(chǎn)品的目標(biāo)價格定位,定價的基本策略。</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日,由中國電子商務(wù)協(xié)會B2B行業(yè)分會提供戰(zhàn)略指導(dǎo),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ù)商云】小編就整理了電子商務(wù)平臺建設(shè)的站內(nèi)站外營銷干貨,供給搭建跨境電商平臺解決方案的運(yùn)營參考。</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)需要進(jìn)行維護(hù)</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)站得以生存總有他的道理,存在即合理,當(dāng)然一些商城網(wǎng)站逐漸退出了我們的實現(xiàn),在競爭中被淘汰,那么一個好的商城系統(tǒng)需要對它進(jìn)行怎么的維護(hù)呢?才能保證其...</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">如何制作一個電子商務(wù)平臺系統(tǒng)?</span>
<span class="article-time">[11-07]</span>
</div>
<div class="article-content">
<p>大致的流程如下,以電商平臺開發(fā)公司【數(shù)商云】為例子,在實際項目往往會涉及到人與人之間的復(fù)雜溝通以及協(xié)作,所以需要有嚴(yán)謹(jǐn)?shù)墓芾硪?guī)范以及彈性的流程控制才能達(dá)到較高水準(zhǔn)的項目質(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ù)網(wǎng)站,需要運(yùn)用哪些設(shè)計原則</span>
<span class="article-time">[03-21]</span>
</div>
<div class="article-content">
<p>隨著目前電子商務(wù)網(wǎng)站開發(fā)技術(shù)的迭代,電商網(wǎng)站的交互設(shè)計得到了很大程度的提升,可以認(rèn)為現(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è)獨(dú)立B2C電商平臺_會面臨什么問題?</span>
<span class="article-time">[09-20]</span>
</div>
<div class="article-content">
<p>傳統(tǒng)企業(yè)電子商務(wù)平臺建設(shè)公司【數(shù)商云】市場總監(jiān)在這里分享提出一些B2C企業(yè)內(nèi)部運(yùn)營(主要是訂單處理流程方面)所面臨的問題:</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ū)電商達(dá)人教路</span>
<span class="article-time">[09-16]</span>
</div>
<div class="article-content">
<p>通過社區(qū)電商達(dá)人了解到,最先發(fā)展起社區(qū)電商的是一些物業(yè),以及擁有社區(qū)資源的企業(yè)。他們有一個共同點都屬于傳統(tǒng)型企業(yè),想把一個社區(qū)電商平臺運(yùn)營好。</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ù)網(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è)在溝通過程多次強(qiáng)調(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>