整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文章拆分成標簽頁顯示，既可以節約空間，又方便讀者查找自己想要閱讀的內容，而且可以使頁面變得整潔清晰。其實，在WordPress中實現這項功能很容易，下文為大家分享了添加標簽頁的具體步驟。
第一步：安裝插件；
首先我們要安裝并啟用“Tabs Shortcode and Widget”插件。該插件安裝啟用后直接可以使用，不需任何設置。
第二步：設置標簽頁；
新建文章或頁面，或者是編輯現有文章或頁面，在編輯欄上方你會發現多了一個按鈕；鼠標點擊該按鈕就會出現Tabs Layout選項；如下圖：
點擊Tabs Layout選項進入Tab設計界面，第一項是設置Tab的個數，在這里你可以選擇滿足您需求的標簽頁個數，第二項是選擇Tab模式，這里有horizontal、vertical兩種模式可供選擇，之后是標簽頁總名稱，和標簽頁1的名稱，你還可以根據個人喜好，給標簽頁設置圖標；最后編輯標簽頁內容；具體界面如下圖：
第一個標簽頁編輯結束后，以同樣的方式完成其余標簽頁的編輯。在整個設計的過程中，在編輯框右側都可以看到編輯效果。編輯結束后，在編輯框最后還有一項自定義選項CSS Class。你可以根據你的個人愛后，在這里添加CSS類文件，將標簽頁的界面設置成你喜歡的界面。所有的標簽頁都設計完成后，點擊對話框頂部或底部的insert按鈕保存設置并發布文章或頁面。這個時候打開網頁，你就可以看到你的文章以標簽頁的形式顯示。
接下來給大家介紹的是“Tabs Shortcode and Widget”插件的另一項添加標簽頁的功能——通過插入小工具，在主邊欄添加標簽頁。設置過程與在文章中添加標簽頁相似，只是插入的位置不同。
具體步驟：
打開儀表盤，選擇外觀菜單下的小工具，選擇添加“OTW Shortcode Widget”于主邊欄。
點擊添加“Tabs Layout”進入標簽頁設計界面，該界面跟在文章中添加標簽頁的界面完全相同。按照前面編輯文章中標簽頁的方式編輯，結束后保存編輯并且保存小工具。現在打開之前打開過的網頁，刷新，你會發現在主邊欄的最下方出現了剛剛編輯好的標簽頁
上述就是添加選卡的全過程，希望對大家有所幫助。謝謝！
您2019豬事順利，心想事成。
Tab 切換是種很常見的網頁呈現形式，不管是PC或者H5都會經常看到，今天就為小伙伴們提供多種純CSS Tab 切換的實現方式，同時對比一下那種代碼更方便，更通俗易懂。
3種純CSS方式實現Tab 切換
純CSS實現都面臨2個問題：
1、 如何接收點擊事件？
2、 如何操作相關DOM？
擁有 checked 屬性的表單元素， <input type="radio"> 或者 <input type="checkbox"> 能夠接收到點擊事件。
知識點:
1、 使用 radio 標簽的 :checked 偽類，加上 <label for> 實現純 CSS 捕獲點擊事情
2、 使用了 ~ 選擇符對樣式進行控制
<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 內容:123456</div> <div class="content2">tab2 內容: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;
}
知識點:
1、 要使用 :target 偽元素，需要 HTML 錨點，以及錨點對應的 HTML 片段
2、 核心是使用 :target 偽類接收點擊事件
3、 通過兄弟選擇符 ~ 控制樣式
<div class="container"> <div id="content1" class="active">tab 1內容:123456</div> <div id="content2">tab 2內容: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 它表示一個元素獲得焦點，或該元素的后代元素獲得焦點。
重點：它或它的后代獲得焦點。
這也就意味著，它或它的后代獲得焦點，都可以觸發 :focus-within。
知識點
1、 這個屬性有點類似 Javascript 的事件冒泡，從可獲焦元素開始一直冒泡到根元素 html，都可以接收觸發 :focus-within 事件
2、 本例子的思路就是通過獲焦態來控制其他選擇器，以及最重要的是利用了父級的 :not(:focus-within) 來設置默認樣式
<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方式實現Tab 切換
這個效果就很差一些，因為，在tab失去焦點時，就會復原，回到tab1上面，并不推薦這種方式來實現。小編推薦第一種:checked實現方式，更容易理解。
喜歡小編的點擊關注，了解更多知識！
源碼地址和源文件下載請點擊下方“了解更多”
年以來，隨著疫情方面的數據逐漸增多，一些互聯網公司也紛紛發布一些可視化的數據產品服務，讓用戶可以實時并直觀了解最新情況，可謂一個便民利器。而本文，則通過丁香醫生、以及騰訊新聞推出的“疫情實時動態”可視化服務，總結分享其中運用到的一些常見的數據可視化經驗。
閱讀指南：
（1）受眾人群：初級產品經理
（2）閱讀收獲
首先，需要先簡單澄清下數據可視化的基本概念。數據可視化，實質上是把一些概要信息（數據、關鍵內容），并結合動靜態的圖像視頻等形式進行展示，從而清晰傳遞核心信息。較為注重視覺層面的觸達。
所以我們需要在數據之中挖掘一些重要的價值信息，并以一個可觀的方式呈現。而“重要”的定義是十分明顯的，核心數據、用戶感興趣、有決策意義，都可稱之為重要。
根據馬斯洛五層次需求理論，那么數據可視化在其中屬于什么層次的需求？
受疫情影響，生命安全成了最重要的社會需求。那么滿足大眾對這方面的廣泛需求，推出這樣的數據可視化產品是十分有必要，滿足用戶對疫情情況、資訊信息、醫療信息等方面的獲取，從而保障自己基本的需求。
（1）脈絡
初始，丁香醫生率先推出一個H5的可視化頁面，匯總披露病例數據。隨后，一些大廠也開始陸續推出，包括頭條、騰訊等等。
而為什么大家都紛紛推出這樣的數據服務，從戰略層來說：一是做好企業責任，滿足用戶的知情需求；其二是滿足自己的平臺用戶，并吸引流量，這都是拉新、促活的寶貴方式。
而展示的信息，主要包括每日的新增、累計病例數，各地區的病例分布，以及疫情新聞、醫學知識等方面的內容。
（2）價值
而接下來，也將依據用戶體驗五要素中的范圍層、框架層、表現層，分別對這個疫情數據可視化的產品服務進行分析。
范圍層的定義是決定這樣的產品服務需要提供什么范圍內的功能服務，什么是不做的。以及要做的數據指標，哪些是關鍵的，哪些是次要的。所以我們可以羅列一下這樣數據可視化產品，基于用戶的需求是需要準備什么樣的數據指標。
上圖摘自國家衛健委某日的全日數據，在制作可視化的時候，需要考慮數據源的出處以及能提供什么樣的指標及口徑。
從中可以看出，大致可以劃分兩類關鍵數據：一個是病例的數據，一個是輔助性的數據。我們需要從中挑出其適合展示同時也是用戶需要關心的數據。
通常做這種可視化產品，總結性的數據是十分關鍵的。而基于用戶的關注點，每日新增、累計，就是其中的關鍵。
另外，基于“時間”和“地區”，代表了數據的“屬性”。而屬性則反應了這個數據可以以什么樣的特點進行展現。而“時間”和“地區”是，最適合以數據趨勢和數據分布的兩種主要數據可視化表達形式。
從下表可以看出，3家平臺的數據指標在展示上是比較一致的，核心指標都一一羅列展示。
其中在時間的“小時”級別，以及“解除醫學觀察”等細分指標都不做展示，我認為主要出于以下目的：
框架層的定義是指根據要做的功能范圍，應該確定如何正確布局和設計，可以簡單理解為PPT的排版一樣，以什么樣的方式來排列展現這些元素。
首先，我們需要先看看上文提及到的幾類數據指標，重新分類一下,并標記相應的優先級。
顯然按照合理的布局應該是：
大致的布局是已經清晰了，那么接下來就需要基于數據類型采用合理的可視化展示形式。
前面也提過，由于是時間和地區下的各類數據，基于這樣的屬性，是可以做趨勢、地域、列表等分布的展示方式。支持趨勢的圖形則主要為折線、柱狀圖，支持地域分布類型則為地圖，而列表則為常規的類報表方式等。
其中，由于時間跨度較長和地區明細較多，如果使用柱狀圖，則會顯得橫軸較長，所以在有限的手機屏幕尺寸下，是不適宜展示的。
（Echarts部分地圖特性截圖）
所以在這里，更傾向于采用粗一些的2D省級行政地圖形式，開發周期短，且滿足最基本需求。
（1）匯總數據
相同點：
差異點：
評價：正常應遵循“標題+具體數值+較昨日變化”這樣的排列比較合適，上下順序先從標題了解該指標的含義，居中放大具體數值，突出關鍵信息，其次顯示較昨日變化對比，感知變化情況。
（2）各指標趨勢
相同點：
差異點：
（3）國內各省市分布
相同點：統一以常規列表分布展示國內各省市的疫情數據情況，并集中以地區、確診、死亡、治愈等字段。
差異點：
評價：
（4）海外各國分布
展示方式如國內疫情一致，這里不多說。而唯一不同的是，丁香醫生在全球各國的基礎做了“洲”單位的分類。這樣的好處是，分類顯得更有層次性，了解某個范圍內的地區更有顯著性。
表現層所關注的，是頁面各個元素組件的形狀、色彩和大小比例搭配。同時數據可視化十分重視圖形色彩的表達，一個好的視覺設計，能夠為數據的信息傳遞起到十分重要的作用。
從上圖可以看出，3家平臺都展示了4個關鍵指標“確診”、“疑似”、“死亡”和“治愈”，以及在色彩選擇上，盡管有具體色值的差別，但是理念是都較為接近的。
地圖分布通常是以顏色深淺代表數據的“密集程度”，那么就要確定2個關鍵的地方，1個是色系，另外1個是合理的刻度比例。前者根據數據內涵確定合適的色系進行表達，后者是做色系的層次區分。
以上就是此次疫情數據下，在可視化應用上的一些體驗總結，3家都遵循了一些基本原則，同時也有各自的一些風格。而數據可視化的應用需要兼顧不同的因素，達到最佳效果。
一個理想的可視化設計流程，需要經歷“數據指標的范圍篩選、頁面的布局抉擇、可視化的視覺設計“等關鍵步驟。
3家平臺地址：
丁香醫生：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，數據產品一枚；公眾號：吾某
本文由 @A.D. 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
