整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
寫Express接下來的內容前，先來一篇輕松點兒的文章，之前我總結過一篇關于nth-child&nth-of-type的文章（還記得那篇文章的結論嗎？對，就是兩句話）。這一篇我依然來處理一個有關CSS的問題。
說到tab切換，咱們很熟悉，最常用的做法是使用JS處理顯示與隱藏，聽說利用CSS3的偽類選擇器也能實現相同的tab切換效果，于是我就試一把。
這個方法主要是借助input和checked屬性控制其后面元素的顯示與否，涉及到的需要搞懂的知識點就三個：
1、nth-of-type的使用
2、input的id和label的for屬性聯系
3、在css3中‘~’表示兄弟元素，‘+’表示相鄰元素
下面是實例區：
知道了上面這三點，那這個問題就簡單了，先看一下例子的DOM結構：
從上圖可以看出DOM結構很簡單，但是要注意兩點，第一：input的id和label中的for對應（如tab1），第二：input必須和其內容div.tab在同一級，也就是說它們必須擁有同一個父元素。
下面看一下本例的重點部分，樣式：
從樣式代碼上可以看出，當input處理checked時，通過“+”符給label加樣式，使用nth-of-type定位，在通過“~”將對應的內容區設置為display:block。
如果想讓這個切換看起來更動感，可以使用transition給切換加個動畫。
寫在最后的總結：
通過測試，這種方法在IE8下不兼容，這沒關系，因為我們可以在H5開發中用的爽爽的。哈哈
短內容，說完整事，哪怕只讀一篇也能學知識。點擊關注小鄭搞碼事，說的都是那堆代碼。謝謝您的鼓勵！
HTML 代表超文本標記語言。它給出了網站或網頁的基本結構。它定義了您的網站在結構方面的外觀，即網站包含標題、輸入、表單、表格、按鈕等等。
HTML 代碼
<!DOCTYPE html>
<html>
<head>
<title>Hello world</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>
您可以在此處查看 Hello world 網站的實時版本，其代碼寫在上面。
我們將詳細討論每一行代碼，以便您能夠了解每一行的想法。
這一行基本上告訴網絡瀏覽器我們正在使用哪個HTML版本。在本例中我們是HTML5。
這是包含我們網頁的所有代碼的HTML元素。換句話說，這包含了網頁所需的所有結構和設置，即外部 CSS、JS、CDN 等。您可能會注意到所有內容都位于<html>和之間</html>。這是因為這樣所有的內容都會在這些元素之間。<html>通常指的是開始標簽，</html>通常指的是結束標簽。
該元素包含了網頁的所有要求。例如，如果您想添加一些外部 CSS 文件、外部 JS 文件或一些外部 CDN（這是網站的要求），那么此元素就會派上用場。如果您不了解 CSS，它用于樣式目的，JS 用于功能目的，CDN 代表內容交付網絡。
該元素包含顯示在Web 瀏覽器選項卡中的標題。如果您訪問 Hello world 網站，您會注意到網絡瀏覽器的選項卡中有標題。這是這些標簽的主要工作。Hello world<title>...</title>
該元素包含用戶可見的結構。您可以想象到的上述元素可以用于我們網頁的設置。主要內容進入正文部分。
h1是用于標題的標題元素。如果您訪問 hello world 網站，我們可以看到的 hello world 就是標題。h1不僅僅是我們擁有的標題元素。我們有一個標題元素，從 開始h1，直到 ，h6唯一的區別是h1較大，然后尺寸減小，直到 h6。
如果您想了解有關 HTML 元素的更多信息，可以在此處查看。
<table>
<tr>
<th>S.No.</th>
<th>Day</th>
</tr>
<tr>
<td>1</td>
<td>Sunday</td>
</tr>
<tr>
<td>2</td>
<td>Monday</td>
</tr>
<tr>
<td>3</td>
<td>Tuesday</td>
</tr>
<tr>
<td>4</td>
<td>Wednesday</td>
</tr>
<tr>
<td>5</td>
<td>Thursday</td>
</tr>
<tr>
<td>6</td>
<td>Friday</td>
</tr>
<tr>
<td>7</td>
<td>Saturday</td>
</tr>
</table>
table：這是用于創建表格的表格元素。
tr：表示表格行。即表的行。
td：表示表數據。即包含該表的數據。
您可以在此處查看代碼的實時版本。
注意此代碼必須寫在body元素之間。
當您上網時，您可能見過一些 HTML 表單。讓我們來創建我們自己的 HTML 表單。
這是代碼片段。
<form>
Name: <input type="text" name="name"><br>
Email: <input type="email" name="email"><br>
<input type="submit" value="Submit">
</form>
form：HTML 元素幫助我們創建 HTML 表單。
input：輸入元素允許我們獲取用戶的輸入。和稱為HTML 屬性type="email"。name="email"
您可以在此處查看該網頁的實時版本。
注意此代碼必須寫在body元素之間。
總之，HTML 通過定義其結構作為網站或網頁的基礎。它決定了網站在標題、表單、表格、按鈕等元素方面的顯示方式。通過使用 HTML 標簽和元素，我們可以創建結構良好且組織良好的網頁。
平時做前端開發，對于頁面切換、最小化、長時間不操作這些安全問題，其實接觸不多，除非涉及到隱秘問題，可能需要將這些實現考慮進去。這次我接到這個需求時，也是處于懵逼狀態
visibilityChange，這個在瀏覽器標簽頁被隱藏或顯示的時候都會除非該方法，看似能滿足頁面切換或最小化。但是它有個問題，就是在頁面縮放，下圖綠色標識，而非最小化時也會執行該方法。
document.addEventListener(visibilityChange, ()=> {
let screenTop=window.localStorage.getItem('screenTop');
// 隱藏時觸發了2次
setTimeout(()=> {
// 采用screenTop，是因為縮放時也會觸發該事件，無法區分是縮放還是最小化
if (screenTop && screenTop==window.screenTop && document.visibilityState===hidden) {
this.props.dispatch({
type: 'SET_PAYROLL_STATUS',
data: false
})
// window.location.href=window.location.href;
} else {
window.localStorage.setItem('screenTop', window.screenTop)
}
}, 0)
}, false)
上面代碼中的判斷screenTop==window.screenTop能將縮放這個排除在外，結合document.visibilityState能實現頁面切換、頁面最小化的時候修改狀態保證頁面內容安全，譬如通過設置狀態為false，不展示設計安全的內容。
而判斷長時間是否操作，主要是通過setInterval來倒計時變量count，如果有操作就將count初始化，從新倒計時。
hasOperate=(callback, second)=> {
let count=0;
const countTime=()=> {
timer=setInterval(()=> {
if (document.visibilityState==='hidden') {
count=0;
// clearInterval(timer);
}
count++;
if (count==second) {
callback();
clearInterval(timer);
count=0
}
}, 1000);
}
let x;
let y;
document.addEventListener('mousemove', ()=> {
let x1=event.clientX;
let y1=event.clientY;
if (x !=x1 || y !=y1) {
count=0;
}
x=x1;
y=y1;
})
document.addEventListener('keydown', ()=> {
count=0;
})
document.addEventListener('scroll', ()=> {
count=0;
})
上面代碼，主要通過統計count等于你設置的初始化時間second，進行回調，回調的主要內容是隱藏安全頁面；如果在統計的過程中發現有滾動或鼠標移動以及鍵盤按下等相關操作，則將count初始化為0，醬紫就能完成長時間不操作的問題了
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
