Method and device for displaying opening and closing effect on webpage based on CSS

A web page and switch technology, applied in the Internet field, can solve problems such as increased system resource consumption, single logic, and large maintenance costs, and achieve the effects of reducing script development processes, saving system resources, and improving efficiency

Active Publication Date: 2016-10-12
TENCENT TECH (SHENZHEN) CO LTD
View PDF2 Cites 3 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

However, for desktop problems, the logic is relatively simple, and the use of script code will consume a lot of maintenance costs and increase the consumption of system resources.

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Method and device for displaying opening and closing effect on webpage based on CSS
  • Method and device for displaying opening and closing effect on webpage based on CSS
  • Method and device for displaying opening and closing effect on webpage based on CSS

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0065] Such as figure 2 , image 3 , Figure 4 As shown, Embodiment 1 of the present invention provides a method for displaying switch effects on a web page based on CSS, including:

[0066] Step 101, inserting a title and content associated with the title into the web page, and setting a selection button on the title through CSS; wherein, the title and the content associated with the title are arranged adjacently on the web page;

[0067] The invention is particularly suitable for mobile phone web pages, and the switch effect is displayed on the mobile phone web pages. The title mentioned in the present invention refers to the title containing expanded content, and the user hopes to obtain the expanded content contained under the title after selecting the title. The user can select the title by clicking the mouse or touching the screen. For a single title, only the title and the content associated with the title need to be inserted into the web page, and a selection butto...

Embodiment 2

[0086] Such as Figure 5 As shown, Embodiment 2 of the present invention provides a method for displaying switch effects on a web page based on CSS, including:

[0087] Step 201, inserting a question and an answer to the question in a web page, and setting radio buttons on the question through CSS. Wherein, each question and corresponding answer are arranged adjacently on the webpage.

[0088] The radio button is a control in HTML language; in order to facilitate users to view questions and improve user experience, the radio button is hidden on the webpage.

[0089] When multiple issues need to be displayed on the same web page at the same time, such as Figure 6 As shown, step 201 includes:

[0090] Step 2011, insert multiple questions and answers corresponding to the questions into the webpage.

[0091] Generally speaking, step 2011 is realized by using HTML language.

[0092] Step 2012, arranging the plurality of questions and the answers to each question in sequence; ...

Embodiment 3

[0107] Such as Figure 8 , Figure 9 As shown, Embodiment 3 of the present invention provides a method for displaying switch effects on a web page based on CSS, including:

[0108] Step 301 , inserting a question and an answer to the question in a web page, and setting radio buttons on the question through CSS. Wherein, each question and corresponding answer are arranged adjacently on the webpage.

[0109] The radio button is a control in HTML language; in order to facilitate users to view questions and improve user experience, the radio button is hidden on the webpage.

[0110] When multiple issues need to be displayed on the same web page at the same time, such as Figure 9 As shown, step 301 includes:

[0111] Step 3011, insert multiple questions and answers corresponding to the questions into the web page.

[0112] Generally speaking, step 3011 is realized by using HTML language.

[0113] Step 3012, arranging the plurality of questions and the answers to each question ...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

PUM

No PUM Login to view more

Abstract

The invention discloses a method and device for displaying an opening and closing effect on a webpage based on CSS. The method includes the steps that titles and content related to the titles are inserted into the webpage; a selection button is arranged on each title through the CSS; the state of the selection buttons is obtained; the CSS display or conceal the title related content corresponding to the buttons according to the state of the selection buttons. As the selection button is arranged on each button through the CSS to obtain the state of the selection buttons, the opening and closing effect, corresponding to the titles, on the webpage can be achieved through the selection buttons and a selector based on the CSS without script code operation, the flow path of script development is reduced, system resources consumed by script code calculation can be saved, and system efficiency is improved.

Description

technical field [0001] The invention belongs to the technical field of the Internet, and in particular relates to a method and a device for displaying switch effects on a webpage based on CSS. Background technique [0002] In mobile web pages, it is inevitable to use effects such as switches (that is, click to open, or click to close) or click to expand the content, and click to collapse the display. At present, to realize the switch effect in the mobile webpage, it is necessary to use script code to judge whether the user selects the question. After the script code obtains the user's selected question, it finds the corresponding answer and displays it. Work process such as figure 1 shown. [0003] Step 1: Arrange the questions and answers in sequence on the web page; [0004] Step 2: display the problem in the web page; [0005] Step 3: Judge whether the question is selected through the script code; [0006] Step 4: If yes, find the corresponding answer and display it....

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to view more

Application Information

Patent Timeline
no application Login to view more
Patent Type & Authority Applications(China)
IPC IPC(8): G06F9/45G06F17/30
CPCG06F8/447G06F16/957G06F16/986
Inventor 尹淼
Owner TENCENT TECH (SHENZHEN) CO LTD
Who we serve
  • R&D Engineer
  • R&D Manager
  • IP Professional
Why Eureka
  • Industry Leading Data Capabilities
  • Powerful AI technology
  • Patent DNA Extraction
Social media
Try Eureka
PatSnap group products

Browse by: Latest US Patents, China's latest patents, Technical Efficacy Thesaurus, Application Domain, Technology Topic.

© 2024 PatSnap. All rights reserved.Legal|Privacy policy|Modern Slavery Act Transparency Statement|Sitemap