整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
文章拆分成標(biāo)簽頁顯示，既可以節(jié)約空間，又方便讀者查找自己想要閱讀的內(nèi)容，而且可以使頁面變得整潔清晰。其實(shí)，在WordPress中實(shí)現(xiàn)這項(xiàng)功能很容易，下文為大家分享了添加標(biāo)簽頁的具體步驟。
第一步：安裝插件；
首先我們要安裝并啟用“Tabs Shortcode and Widget”插件。該插件安裝啟用后直接可以使用，不需任何設(shè)置。
第二步：設(shè)置標(biāo)簽頁；
新建文章或頁面，或者是編輯現(xiàn)有文章或頁面，在編輯欄上方你會(huì)發(fā)現(xiàn)多了一個(gè)按鈕；鼠標(biāo)點(diǎn)擊該按鈕就會(huì)出現(xiàn)Tabs Layout選項(xiàng)；如下圖：
點(diǎn)擊Tabs Layout選項(xiàng)進(jìn)入Tab設(shè)計(jì)界面，第一項(xiàng)是設(shè)置Tab的個(gè)數(shù)，在這里你可以選擇滿足您需求的標(biāo)簽頁個(gè)數(shù)，第二項(xiàng)是選擇Tab模式，這里有horizontal、vertical兩種模式可供選擇，之后是標(biāo)簽頁總名稱，和標(biāo)簽頁1的名稱，你還可以根據(jù)個(gè)人喜好，給標(biāo)簽頁設(shè)置圖標(biāo)；最后編輯標(biāo)簽頁內(nèi)容；具體界面如下圖：
第一個(gè)標(biāo)簽頁編輯結(jié)束后，以同樣的方式完成其余標(biāo)簽頁的編輯。在整個(gè)設(shè)計(jì)的過程中，在編輯框右側(cè)都可以看到編輯效果。編輯結(jié)束后，在編輯框最后還有一項(xiàng)自定義選項(xiàng)CSS Class。你可以根據(jù)你的個(gè)人愛后，在這里添加CSS類文件，將標(biāo)簽頁的界面設(shè)置成你喜歡的界面。所有的標(biāo)簽頁都設(shè)計(jì)完成后，點(diǎn)擊對(duì)話框頂部或底部的insert按鈕保存設(shè)置并發(fā)布文章或頁面。這個(gè)時(shí)候打開網(wǎng)頁，你就可以看到你的文章以標(biāo)簽頁的形式顯示。
接下來給大家介紹的是“Tabs Shortcode and Widget”插件的另一項(xiàng)添加標(biāo)簽頁的功能——通過插入小工具，在主邊欄添加標(biāo)簽頁。設(shè)置過程與在文章中添加標(biāo)簽頁相似，只是插入的位置不同。
具體步驟：
打開儀表盤，選擇外觀菜單下的小工具，選擇添加“OTW Shortcode Widget”于主邊欄。
點(diǎn)擊添加“Tabs Layout”進(jìn)入標(biāo)簽頁設(shè)計(jì)界面，該界面跟在文章中添加標(biāo)簽頁的界面完全相同。按照前面編輯文章中標(biāo)簽頁的方式編輯，結(jié)束后保存編輯并且保存小工具。現(xiàn)在打開之前打開過的網(wǎng)頁，刷新，你會(huì)發(fā)現(xiàn)在主邊欄的最下方出現(xiàn)了剛剛編輯好的標(biāo)簽頁
上述就是添加選卡的全過程，希望對(duì)大家有所幫助。謝謝！
您2019豬事順利，心想事成。
Tab 切換是種很常見的網(wǎng)頁呈現(xiàn)形式，不管是PC或者H5都會(huì)經(jīng)常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實(shí)現(xiàn)方式，同時(shí)對(duì)比一下那種代碼更方便，更通俗易懂。
3種純CSS方式實(shí)現(xiàn)Tab 切換
純CSS實(shí)現(xiàn)都面臨2個(gè)問題：
1、 如何接收點(diǎn)擊事件？
2、 如何操作相關(guān)DOM？
擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點(diǎn)擊事件。
知識(shí)點(diǎn):
1、 使用 radio 標(biāo)簽的 :checked 偽類，加上 <label for> 實(shí)現(xiàn)純 CSS 捕獲點(diǎn)擊事情
2、 使用了 ~ 選擇符對(duì)樣式進(jìn)行控制
<div class="container"> <input class="nav1" id="li1" type="radio" name="nav"> <input class="nav2" id="li2" type="radio" name="nav"> <ul class='nav'> <li class='active'><label for="li1">tab1</label></li> <li><label for="li2">tab2</label></li> </ul> <div class="content"> <div class="content1 default">tab1 內(nèi)容:123456</div> <div class="content2">tab2 內(nèi)容:abcdefgkijkl</div> </div> </div>
添加樣式
.container *{
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 400px;
margin: 50px auto;
}
.container input {
display: none;
}
.nav {
position: relative;
overflow: hidden;
}
.nav li {
width: 200px;
float: left;
text-align: center;
background: #ddd;
list-style: none;
}
.nav li label {
display: block;
width: 200px;
line-height: 36px;
font-size: 18px;
cursor: pointer;
}
.content {
position: relative;
overflow: hidden;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
}
.content1,
.content2 {
display: none;
width: 100%;
height: 100%;
}
.nav1:checked ~ .nav li {
background: #ddd;
color: #000;
}
.nav1:checked ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
.nav2:checked ~ .nav li {
background: #ddd;
color: #000;
}
.nav2:checked ~ .nav li:last-child {
background: #ff7300;
color: #fff;
}
.nav1:checked ~ .content > div {
display: none;
}
.nav1:checked ~ .content > div:first-child {
display: block;
}
.nav2:checked ~ .content > div {
display: none;
}
.nav2:checked ~ .content > div:last-child {
display: block;
}
.nav li.active {
background: #ff7300;
color: #fff;
}
.content .default {
display: block;
}
知識(shí)點(diǎn):
1、 要使用 :target 偽元素，需要 HTML 錨點(diǎn)，以及錨點(diǎn)對(duì)應(yīng)的 HTML 片段
2、 核心是使用 :target 偽類接收點(diǎn)擊事件
3、 通過兄弟選擇符 ~ 控制樣式
<div class="container"> <div id="content1" class="active">tab 1內(nèi)容:123456</div> <div id="content2">tab 2內(nèi)容:abcdefgkijkl</div> <ul class='nav'> <li class="active"><a href="#content1">tab1</a></li> <li><a href="#content2">tab2</a></li> </ul> <div class="wrap"></div> </div>
添加樣式
.container *{
padding: 0;
margin: 0;
}
.container {
position: relative;
width: 400px;
margin: 50px auto;
}
.nav {
position: relative;
overflow: hidden;
}
li {
width: 200px;
float: left;
text-align: center;
background: #ddd;
list-style: none;
}
li a {
display: block;
width: 200px;
line-height: 36px;
font-size: 18px;
cursor: pointer;
text-decoration: none;
color: #000;
}
#content1,
#content2 {
position: absolute;
overflow: hidden;
top: 36px;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
padding: 10px;
}
#content1,
#content2 {
display: none;
width: 100%;
background: #fff;
}
#content1:target,
#content2:target {
display: block;
}
#content1.active {
display: block;
}
.active ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
#content1:target ~ .nav li {
background: #ddd;
color: #000;
}
#content1:target ~ .nav li:first-child {
background: #ff7300;
color: #fff;
}
#content2:target ~ .nav li {
background: #ddd;
color: #000;
}
#content2:target ~ .nav li:last-child {
background: #ff7300;
color: #fff;
}
.wrap {
position: absolute;
overflow: hidden;
top: 36px;
width: 400px;
height: 100px;
border: 1px solid #999;
box-sizing: border-box;
}
:focus-within 它表示一個(gè)元素獲得焦點(diǎn)，或該元素的后代元素獲得焦點(diǎn)。
重點(diǎn)：它或它的后代獲得焦點(diǎn)。
這也就意味著，它或它的后代獲得焦點(diǎn)，都可以觸發(fā) :focus-within。
知識(shí)點(diǎn)
1、 這個(gè)屬性有點(diǎn)類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發(fā) :focus-within 事件
2、 本例子的思路就是通過獲焦態(tài)來控制其他選擇器，以及最重要的是利用了父級(jí)的 :not(:focus-within) 來設(shè)置默認(rèn)樣式
<div class="container"> <div class="nav-box"> <button class="nav1">tab1</button> <button class="nav2">tab2</button> <div class="content-box"> <div class="content1"> content-1 </div> <div class="content2"> content-2 </div> </div> </div> </div>
添加樣式
.container {
width: 300px;
margin: 50px auto;
padding: 10px;
boder: 1px solid #ddd;
}
.nav-box {
font-size: 0;
}
button {
width: 150px;
height: 40px;
box-sizing: border-box;
outline: none;
background: #fff;
border: 1px solid #ddd;
font-size: 18px;
cursor: pointer;
}
button:focus-within {
color: #fff;
background: #ff7300;
}
.content-box {
font-size: 24px;
border: 1px solid #ddd;
height: 100px;
}
.content-box div {
display: none;
}
.nav-box:not(:focus-within) .nav1 {
color: #fff;
background: #ff7300;
}
.nav-box:not(:focus-within) .content1 {
display: block;
}
.nav1:focus-within ~ .content-box .content1 {
display: block;
}
.nav2:focus-within ~ .content-box .content2 {
display: block;
}
3種純CSS方式實(shí)現(xiàn)Tab 切換
這個(gè)效果就很差一些，因?yàn)椋趖ab失去焦點(diǎn)時(shí)，就會(huì)復(fù)原，回到tab1上面，并不推薦這種方式來實(shí)現(xiàn)。小編推薦第一種:checked實(shí)現(xiàn)方式，更容易理解。
喜歡小編的點(diǎn)擊關(guān)注，了解更多知識(shí)！
源碼地址和源文件下載請(qǐng)點(diǎn)擊下方“了解更多”
年以來，隨著疫情方面的數(shù)據(jù)逐漸增多，一些互聯(lián)網(wǎng)公司也紛紛發(fā)布一些可視化的數(shù)據(jù)產(chǎn)品服務(wù)，讓用戶可以實(shí)時(shí)并直觀了解最新情況，可謂一個(gè)便民利器。而本文，則通過丁香醫(yī)生、以及騰訊新聞推出的“疫情實(shí)時(shí)動(dòng)態(tài)”可視化服務(wù)，總結(jié)分享其中運(yùn)用到的一些常見的數(shù)據(jù)可視化經(jīng)驗(yàn)。
閱讀指南：
（1）受眾人群：初級(jí)產(chǎn)品經(jīng)理
（2）閱讀收獲
首先，需要先簡單澄清下數(shù)據(jù)可視化的基本概念。數(shù)據(jù)可視化，實(shí)質(zhì)上是把一些概要信息（數(shù)據(jù)、關(guān)鍵內(nèi)容），并結(jié)合動(dòng)靜態(tài)的圖像視頻等形式進(jìn)行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達(dá)。
所以我們需要在數(shù)據(jù)之中挖掘一些重要的價(jià)值信息，并以一個(gè)可觀的方式呈現(xiàn)。而“重要”的定義是十分明顯的，核心數(shù)據(jù)、用戶感興趣、有決策意義，都可稱之為重要。
根據(jù)馬斯洛五層次需求理論，那么數(shù)據(jù)可視化在其中屬于什么層次的需求？
受疫情影響，生命安全成了最重要的社會(huì)需求。那么滿足大眾對(duì)這方面的廣泛需求，推出這樣的數(shù)據(jù)可視化產(chǎn)品是十分有必要，滿足用戶對(duì)疫情情況、資訊信息、醫(yī)療信息等方面的獲取，從而保障自己基本的需求。
（1）脈絡(luò)
初始，丁香醫(yī)生率先推出一個(gè)H5的可視化頁面，匯總披露病例數(shù)據(jù)。隨后，一些大廠也開始陸續(xù)推出，包括頭條、騰訊等等。
而為什么大家都紛紛推出這樣的數(shù)據(jù)服務(wù)，從戰(zhàn)略層來說：一是做好企業(yè)責(zé)任，滿足用戶的知情需求；其二是滿足自己的平臺(tái)用戶，并吸引流量，這都是拉新、促活的寶貴方式。
而展示的信息，主要包括每日的新增、累計(jì)病例數(shù)，各地區(qū)的病例分布，以及疫情新聞、醫(yī)學(xué)知識(shí)等方面的內(nèi)容。
（2）價(jià)值
而接下來，也將依據(jù)用戶體驗(yàn)五要素中的范圍層、框架層、表現(xiàn)層，分別對(duì)這個(gè)疫情數(shù)據(jù)可視化的產(chǎn)品服務(wù)進(jìn)行分析。
范圍層的定義是決定這樣的產(chǎn)品服務(wù)需要提供什么范圍內(nèi)的功能服務(wù)，什么是不做的。以及要做的數(shù)據(jù)指標(biāo)，哪些是關(guān)鍵的，哪些是次要的。所以我們可以羅列一下這樣數(shù)據(jù)可視化產(chǎn)品，基于用戶的需求是需要準(zhǔn)備什么樣的數(shù)據(jù)指標(biāo)。
上圖摘自國家衛(wèi)健委某日的全日數(shù)據(jù)，在制作可視化的時(shí)候，需要考慮數(shù)據(jù)源的出處以及能提供什么樣的指標(biāo)及口徑。
從中可以看出，大致可以劃分兩類關(guān)鍵數(shù)據(jù)：一個(gè)是病例的數(shù)據(jù)，一個(gè)是輔助性的數(shù)據(jù)。我們需要從中挑出其適合展示同時(shí)也是用戶需要關(guān)心的數(shù)據(jù)。
通常做這種可視化產(chǎn)品，總結(jié)性的數(shù)據(jù)是十分關(guān)鍵的。而基于用戶的關(guān)注點(diǎn)，每日新增、累計(jì)，就是其中的關(guān)鍵。
另外，基于“時(shí)間”和“地區(qū)”，代表了數(shù)據(jù)的“屬性”。而屬性則反應(yīng)了這個(gè)數(shù)據(jù)可以以什么樣的特點(diǎn)進(jìn)行展現(xiàn)。而“時(shí)間”和“地區(qū)”是，最適合以數(shù)據(jù)趨勢和數(shù)據(jù)分布的兩種主要數(shù)據(jù)可視化表達(dá)形式。
從下表可以看出，3家平臺(tái)的數(shù)據(jù)指標(biāo)在展示上是比較一致的，核心指標(biāo)都一一羅列展示。
其中在時(shí)間的“小時(shí)”級(jí)別，以及“解除醫(yī)學(xué)觀察”等細(xì)分指標(biāo)都不做展示，我認(rèn)為主要出于以下目的：
框架層的定義是指根據(jù)要做的功能范圍，應(yīng)該確定如何正確布局和設(shè)計(jì)，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現(xiàn)這些元素。
首先，我們需要先看看上文提及到的幾類數(shù)據(jù)指標(biāo)，重新分類一下,并標(biāo)記相應(yīng)的優(yōu)先級(jí)。
顯然按照合理的布局應(yīng)該是：
大致的布局是已經(jīng)清晰了，那么接下來就需要基于數(shù)據(jù)類型采用合理的可視化展示形式。
前面也提過，由于是時(shí)間和地區(qū)下的各類數(shù)據(jù)，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規(guī)的類報(bào)表方式等。
其中，由于時(shí)間跨度較長和地區(qū)明細(xì)較多，如果使用柱狀圖，則會(huì)顯得橫軸較長，所以在有限的手機(jī)屏幕尺寸下，是不適宜展示的。
（Echarts部分地圖特性截圖）
所以在這里，更傾向于采用粗一些的2D省級(jí)行政地圖形式，開發(fā)周期短，且滿足最基本需求。
（1）匯總數(shù)據(jù)
相同點(diǎn)：
差異點(diǎn)：
評(píng)價(jià)：正常應(yīng)遵循“標(biāo)題+具體數(shù)值+較昨日變化”這樣的排列比較合適，上下順序先從標(biāo)題了解該指標(biāo)的含義，居中放大具體數(shù)值，突出關(guān)鍵信息，其次顯示較昨日變化對(duì)比，感知變化情況。
（2）各指標(biāo)趨勢
相同點(diǎn)：
差異點(diǎn)：
（3）國內(nèi)各省市分布
相同點(diǎn)：統(tǒng)一以常規(guī)列表分布展示國內(nèi)各省市的疫情數(shù)據(jù)情況，并集中以地區(qū)、確診、死亡、治愈等字段。
差異點(diǎn)：
評(píng)價(jià)：
（4）海外各國分布
展示方式如國內(nèi)疫情一致，這里不多說。而唯一不同的是，丁香醫(yī)生在全球各國的基礎(chǔ)做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個(gè)范圍內(nèi)的地區(qū)更有顯著性。
表現(xiàn)層所關(guān)注的，是頁面各個(gè)元素組件的形狀、色彩和大小比例搭配。同時(shí)數(shù)據(jù)可視化十分重視圖形色彩的表達(dá)，一個(gè)好的視覺設(shè)計(jì)，能夠?yàn)閿?shù)據(jù)的信息傳遞起到十分重要的作用。
從上圖可以看出，3家平臺(tái)都展示了4個(gè)關(guān)鍵指標(biāo)“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。
地圖分布通常是以顏色深淺代表數(shù)據(jù)的“密集程度”，那么就要確定2個(gè)關(guān)鍵的地方，1個(gè)是色系，另外1個(gè)是合理的刻度比例。前者根據(jù)數(shù)據(jù)內(nèi)涵確定合適的色系進(jìn)行表達(dá)，后者是做色系的層次區(qū)分。
以上就是此次疫情數(shù)據(jù)下，在可視化應(yīng)用上的一些體驗(yàn)總結(jié)，3家都遵循了一些基本原則，同時(shí)也有各自的一些風(fēng)格。而數(shù)據(jù)可視化的應(yīng)用需要兼顧不同的因素，達(dá)到最佳效果。
一個(gè)理想的可視化設(shè)計(jì)流程，需要經(jīng)歷“數(shù)據(jù)指標(biāo)的范圍篩選、頁面的布局抉擇、可視化的視覺設(shè)計(jì)“等關(guān)鍵步驟。
3家平臺(tái)地址：
丁香醫(yī)生：https://ncov.dxy.cn/ncovh5/view/pneumonia
：https://i.snssdk.com/ugc/hotboard_fe/hot_list/template/hot_list/forum_tab.html?activeWidget=1&city_code=440300&city_name=%E6%B7%B1%E5%9C%B3&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1
騰訊新聞：https://news.qq.com/zt2020/page/feiyan.htm?devid=EB886059-83CA-4F1F-AB3A-B64FCD87D7F7&qimei=eb886059-83ca-4f1f-ab3a-b64fcd87d7f7
作者：A.D，數(shù)據(jù)產(chǎn)品一枚；公眾號(hào)：吾某
本文由 @A.D. 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。
題圖來自Unsplash，基于CC0協(xié)議。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
