[發(fā)明專利]一種基于CSS展示網(wǎng)頁更多內(nèi)容的方法及裝置

在審

• 申請?zhí)枺?/td>: 201710193192.6
• 申請日: 2017-03-28
• 公開（公告）號: CN106934061A
• 公開（公告）日: 2017-07-07
• 發(fā)明（設計）人: 沈文策
• 申請（專利權）人: 福建中金在線信息科技有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 北京集佳知識產(chǎn)權代理有限公司11227
• 代理人: 王寶筠

技術領域

本發(fā)明涉及互聯(lián)網(wǎng)領域，尤其涉及一種基于CSS展示網(wǎng)頁更多內(nèi)容的方法及裝置。

背景技術

隨著互聯(lián)網(wǎng)的迅速發(fā)展，各種網(wǎng)站已經(jīng)非常普及，人們可以在網(wǎng)站上瀏覽相應的圖片或者內(nèi)容，但是由于每個頁面的大小有限，展示的內(nèi)容就會收到限制，就會有一些內(nèi)容隱藏起來，無法進行展示。

現(xiàn)有技術中，若想在頁面中展示更多的內(nèi)容，一般采用的是JavaScript的方法實現(xiàn)，但是這種方法會影響頁面反應速度，用戶使用時體驗性變差。

發(fā)明內(nèi)容

有鑒于此，本發(fā)明實施例公開了一種基于CSS展示網(wǎng)頁更多內(nèi)容的方法及裝置，解決了現(xiàn)有技術中，采用JavaScript的方法顯示更多的內(nèi)容而影響頁面的反映速度，從而使得用戶體驗性差的問題。

本發(fā)明實施例公開了一種基于CSS展示網(wǎng)頁更多內(nèi)容的方法，所述方法可以包括：

將目標網(wǎng)頁隱藏的內(nèi)容劃分為內(nèi)容區(qū)和控制區(qū)；其中，所述控制區(qū)由帶有錨點的兩個a標簽表示，所述兩個a標簽，分別表示顯示和收起；

基于CSS設置所述內(nèi)容區(qū)的高度，并將溢出的內(nèi)容進行隱藏；

響應于顯示目標錨點的鏈接的指令，獲取所述目標錨點的指向，顯示所述目標錨點指向的內(nèi)容區(qū)的內(nèi)容。

可選的，將目標網(wǎng)頁隱藏的內(nèi)容劃分為內(nèi)容區(qū)和控制區(qū)，包括：

通過p標簽表示所述內(nèi)容區(qū)，并為所述內(nèi)容區(qū)設置ID名稱；

通過帶有錨點的兩個a標簽表示控制區(qū)，并將所述錨點的名稱設置為所述ID名稱；其中，所述兩個a標簽分別表示顯示和收起。

可選的，所述獲取所述目標錨點的指向后，還包括：

將所述網(wǎng)頁的高度轉(zhuǎn)換為自動調(diào)整。

可選的，所述響應于顯示目標錨點的鏈接，獲取所述目標錨點的指向，顯示所述目標錨點隱藏的內(nèi)容，包括：

所述響應于顯示目標錨點的鏈接的指令，獲取所述目標錨點的指向，將表示收起的a標簽切換為表示顯示的a標簽，并顯示所述目標錨點隱藏的內(nèi)容。

可選的，還包括：

響應于收起目標錨點的鏈接的指令，獲取所述目標錨點的指向，將表示顯示的a標簽切換為表示收起的a標簽，并將顯示的所述目標錨點顯示的內(nèi)容。

本發(fā)明實施例提供了一種基于CSS展示網(wǎng)頁更多內(nèi)容的裝置，所述裝置可以包括：

劃分單元，用于將目標網(wǎng)頁隱藏的內(nèi)容劃分為內(nèi)容區(qū)和控制區(qū)；其中，所述控制區(qū)由帶有錨點的兩個a標簽表示，所述兩個a標簽，分別表示顯示和收起；

設置單元，用于基于CSS設置所述內(nèi)容區(qū)的高度，并將溢出的內(nèi)容進行隱藏；

顯示單元，用于響應于顯示目標錨點的鏈接的指令，獲取所述目標錨點的指向，顯示所述目標錨點指向的內(nèi)容區(qū)的內(nèi)容。

可選的，所述劃分單元包括：第一設置子單元，用于通過p標簽表示所述內(nèi)容區(qū)，并為所述內(nèi)容區(qū)設置ID名稱；

第二設置子單元，用于通過帶有錨點的兩個a標簽表示所述控制區(qū)

，并將所述錨點的名稱設置為所述ID名稱；其中，所述兩個a標簽分別表示顯示和收起。

可選的，所述裝置還包括：

轉(zhuǎn)換單元，用于將所述網(wǎng)頁的高度轉(zhuǎn)換為自動調(diào)整。

可選的，所述顯示單元，包括：

顯示子單元，用于所述響應于顯示目標錨點的鏈接的指令，獲取所述目標錨點的指向，將表示收起的a標簽切換為表示顯示的a標簽，并顯示所述目標錨點隱藏的內(nèi)容。

可選的，所述裝置還包括：

響應于收起目標錨點的鏈接的指令，獲取所述目標錨點的指向，將表示顯示的a標簽切換為表示收起的a標簽，并將顯示的所述目標錨點顯示的內(nèi)容。

本實施例中，為了展示網(wǎng)頁中更多的內(nèi)容，可以將目標網(wǎng)頁隱藏的內(nèi)容劃分為內(nèi)容區(qū)和控制區(qū)，并且，控制區(qū)由帶有錨點的兩個a標簽表示；基于CSS設置所述內(nèi)容區(qū)的高度，并將溢出的內(nèi)容進行隱藏；響應于顯示目標錨點的鏈接的指令，獲取所述目標錨點的指向，顯示所述目標錨點指向的內(nèi)容區(qū)的內(nèi)容。因此，采用CSS的方式，顯示網(wǎng)頁中更多的內(nèi)容，解決了現(xiàn)有技術中，采用JavaScript的方法顯示更多的內(nèi)容而影響頁面的反映速度，從而使得用戶體驗性差的問題。

附圖說明

為了更清楚地說明本發(fā)明實施例或現(xiàn)有技術中的技術方案，下面將對實施例或現(xiàn)有技術描述中所需要使用的附圖作簡單地介紹，顯而易見地，下面描述中的附圖僅僅是本發(fā)明的實施例，對于本領域普通技術人員來講，在不付出創(chuàng)造性勞動的前提下，還可以根據(jù)提供的附圖獲得其他的附圖。