基于css在网页上展示开关效果的方法及装置的制造方法
【专利摘要】本发明公开了一种基于CSS在网页上展示开关效果的方法及装置，包括在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮；获取所述选择按钮的状态；CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。由于本发明通过CSS在每个标题上设置选择按钮，获取所述选择按钮的状态，通过基于CSS的选择按钮和选择器就能实现网页上对应于标题的开关效果，不需要脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
【专利说明】
基于CSS在网页上展示开关效果的方法及装置
技术领域
[0001]本发明属于互联网技术领域，尤其涉及一种基于CSS在网页上展示开关效果的方法及装置。
【背景技术】
[0002]在手机网页中，难免会用到像开关(即点击后打开，或点击后关闭)或者点击后展开内容，点击后收起显示这样的效果。目前在手机网页中实现开关效果，需要借助脚本代码来判断用户是否选中问题，当脚本代码获取用户选中问题后，再查找到对应的答案将其显示。工作过程如图1所示。
[0003]第一步:在网页中将问题和答案依次排列；
[0004]第一.步:在网页中显不冋题；
[0005]第三步:通过脚本代码判断问题是否被选中；
[0006]第四步:如果是，则查找对应答案，将其显示。
[0007]其中，通过脚本代码判断问题是否被选中时，需要获取用户对网页的操作，例如点击或触屏选择，一旦获取用户的操作，需要脚本代码进一步判断该操作在网页上对应的具体位置，并借助运算逻辑判断和响应用户的操作。
[0008]可见，在用户点击问题的过程中，大量工作都需要脚本代码来完成，会增加脚本开发的流程，脚本代码计算会消耗大量的系统资源，加重系统负担。
[0009]层叠样式表(Cascading Style Sheets，简称CSS)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
[0010]CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。
[0011]相较于CSS选择器，脚本的优点为:脚本可以兼容更多逻辑，逻辑比较清晰，且使用比较灵活，例如，点击时可以做出展开收起以外的工作。而CSS是一个呈现结果，比如点击展开就要呈现出展开的样子，点击收起就要呈现收起的样子。但针对桌面问题类，逻辑较单一，采用脚本代码会消耗大量的维护成本，增加系统资源消耗。
【发明内容】
[0012]本发明提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0013]在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列；
[0014]获取所述选择按钮的状态；
[0015]CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0016]进一步地，所述在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮包括:
[0017]在网页中插入多个标题和与每个标题关联的内容；
[0018]依次排列所述多个标题和每个与标题关联的内容；其中，每个标题和与该标题关联的内容在网页上相邻排列；
[0019]通过CSS在每个所述标题上设置选择按钮；
[0020]在网页中展示所述多个标题。
[0021]进一步地，所述选择按钮为单选按钮。
[0022]进一步地，所述选择按钮为复选按钮；
[0023]所述CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容，包括:
[0024]所述CSS根据所述选择按钮的状态显示或隐藏一个或多个选择按钮对应的标题关联的内容。
[0025]进一步地，所述选择按钮在网页上为隐藏状态。
[0026]进一步地，所述选择按钮在网页上覆盖的范围包括对应的标题在网页上覆盖的范围。
[0027]进一步地，所述CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容，包括:
[0028]所述CSS通过后代选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0029]本发明还提供了一种基于CSS在网页上展示开关效果的装置，包括:
[0030]插入模块，用于在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列；
[0031]状态获取模块，用于获取所述选择按钮的状态；
[0032]显示模块，用于CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0033]进一步地，所述插入模块包括:
[0034]第一插入单元，用于在网页中插入多个标题和与每个标题关联的内容；
[0035]排列单元，用于依次排列所述多个标题和每个与标题关联的内容;其中，每个标题和与该标题关联的内容在网页上相邻排列；
[0036]第二插入单元，用于通过CSS在每个所述标题上设置选择按钮；
[0037]展示单元，用于在网页中展示所述多个标题。
[0038]进一步地，所述选择按钮为单选按钮。
[0039]进一步地，所述选择按钮为复选按钮;所述显示模块还用于:所述CSS根据所述选择按钮的状态显示或隐藏一个或多个选择按钮对应的标题关联的内容。
[0040]进一步地，根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述显示模块还用于:
[0041]所述CSS通过相邻兄弟选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0042]进一步地，所述显示模块还用于:
[0043]所述CSS通过后代选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0044]实施本发明，具有如下有益效果:
[0045](I)由于本发明通过CSS在每个标题上设置选择按钮，获取所述选择按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的选择按钮就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
[0046](2)本发明特别适用于手机网页，在手机网页上展示开关效果。本发明特别适用于桌面问题类，由于桌面问题逻辑较单一，例如，只有问题和问题对应的答案，利用CSS的相邻兄弟选择器，可以有效地省去了脚本代码开发和维护成本，降低系统的资源消耗，提高效率。
[0047](3)本发明的选择按钮为HTML语言中的单选按钮，当用户选择某个问题时，仅显示用户选中的问题的答案，当用户选择其他问题时，前面选择的问题的答案自动关闭。同时存在多个问题时，设置单选按钮在网页的显示效果方面具有明显的优势。
[0048](4)本发明利用CSS的相邻兄弟选择器对网页上的标题，由于相邻兄弟选择器具有较高的运算效率，特别适用于桌面问题类答案的显示。
[0049](5)本发明的选择按钮为复选按钮，当用户选择某个问题时，除了显示用户选中的问题的答案外，当用户选择其他问题时，前面选择的问题的答案也可以同时显示，便于用户同时查看多个问题的答案，并进行比对。
【附图说明】
[0050]为了更清楚地说明本发明实施例或现有技术中的技术方案和优点，下面将对实施例或现有技术描述中所需要使用的附图作简单的介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其它附图。
[0051 ]图1是现有技术中在网页上显示开关效果的示意图；
[0052]图2是本发明实施例一提供的方法的流程图；
[0053]图3是本发明实施例一提供方法的子流程的流程图；
[0054]图4是本发明实施例一提供的方法的网页效果图；
[0055]图5是本发明实施例二提供的方法的流程图；
[0056]图6是本发明实施例二提供的方法的子流程的流程图；
[0057]图7是本发明实施例二提供的方法的网页效果图；
[0058]图8是本发明实施例三提供的方法的流程图；
[0059]图9是本发明实施例三提供的方法的子流程的流程图；
[0060]图10是本发明实施例四提供的方法的流程图；
[0061]图11是本发明实施例五提供的方法的流程图；
[0062]图12是本发明实施例六提供的装置的结构框图。
【具体实施方式】
[0063]下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动的前提下所获得的所有其他实施例，都属于本发明保护的范围。
[0064]实施例一:
[0065]如图2、图3、图4所示，本发明实施例一提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0066]步骤101、在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列；
[0067]本发明特别适用于手机网页，在手机网页上展示开关效果。本发明所说的标题，是指含有展开内容的标题，用户选中该标题后希望能够得到该标题下包含的展开内容。用户可以通过鼠标点击或触屏来选中标题，对于单个的标题，仅需要在网页中插入该标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮。选择按钮为HTML的一种控件。选择按钮在网页上可以是隐藏状态，也可以是显示状态。
[0068]但是，当同时存在多个标题时，如图3所示，步骤101包括:
[0069]步骤1011、在网页中插入多个标题和标题关联的内容；
[0070]具体地，在网页中插入多个标题和标题关联的内容，一般来说，该步骤是采用HTML语言来实现的。
[0071]步骤1012、依次排列所述多个标题和标题关联的内容;其中，每个标题和与该标题关联的内容在网页上相邻排列；
[0072]具体地，步骤1012中依次排列所述多个标题和标题关联的内容包括:
[0073]横向排列或纵向排列多个标题。每个标题和与该标题关联的内容在网页上相邻排列。排列与标题关联的内容时，在每个标题附近，比如上方、下方、左边、右边插入与标题关联的内容。
[0074]步骤1013、通过CSS在每个所述标题上设置选择按钮；
[0075]具体地，步骤1013为通过CSS(即层叠样式表)在每个所述标题上设置选择按钮。CSS可以设置选择按钮覆盖的范围，比如覆盖整个标题的文字部分，或者该标题所在的行或列，或者，包含有改标题的其他范围，从而方便用户快速选中标题。
[0076]步骤1014、在网页中展示所述多个标题。
[0077]具体地，步骤1014中，在网页中展示所述多个标题时，仅展示标题，不展示标题关联的内容。
[0078]本发明中，为了提高开关的显示效果，在网页中插入与标题关联的内容后，隐藏与标题关联的内容，直到该标题对应的选择按钮为选中状态时，才在网页上展示与标题关联的内容。当然，也可以先展示与标题关联的内容，当标题对应的选择按钮处于选中状态时，在网页上隐藏与标题关联的内容。
[0079]步骤102、获取所述选择按钮的状态；
[0080]具体地，通过CSS获取所述选择按钮的状态;所述选择按钮的状态包括选中和未选中。
[0081]步骤103、CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0082]具体地，CSS实时监控并获取选择按钮的状态，当选择按钮为选中状态时，通过CSS显示该按钮对应的标题关联的内容。
[0083]图4为本发明的选择按钮为选中状态时，在网页上的显示状态。
[0084]由于本发明通过CSS在每个标题上设置选择按钮，获取所述选择按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的选择按钮就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提尚系统效率。
[0085]实施例二:
[0086]如图5所示，本发明实施例二提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0087]步骤201、在网页中插入问题和该问题的答案，通过CSS在所述问题上设置单选按钮。其中，每个问题与对应的答案在网页上相邻排列。
[0088]所述单选按钮是HTML语言的一个控件;为了方便用户查看问题，提高用户体验，所述单选按钮在网页上为隐藏状态。
[0089I当同时存在多个问题需要在同一网页上显示时，如图6所示，步骤201包括:
[0090] 步骤2011、在网页中插入多个问题和问题对应的答案。
[0091 ] 一般来说，步骤2011是采用HTML语言来实现的。
[0092]步骤2012、依次排列所述多个问题和每个问题的答案;其中，每个问题与对应的答案在网页上相邻排列。
[0093]具体地，步骤2012中依次排列所述多个问题和问题对应的答案包括:
[0094]横向排列或纵向排列多个问题。排列问题的答案时，每个问题与对应的答案在网页上相邻排列，在每个问题附近，比如上方、下方、左边、右边插入问题对应的答案。如图7所不O
[0095]步骤2013、通过CSS在每个所述问题上设置单选按钮；
[0096]具体地，步骤2013为通过CSS(即层叠样式表)在每个所述问题上设置单选按钮。CSS可以设置单选按钮在网页上覆盖的范围，比如覆盖整个问题的文字部分，或者该问题所在的行或列，或者，包含有该问题的其他范围，从而方便用户快速选中问题。
[0097]步骤2014、在网页中展示所述多个问题。
[0098]具体地，步骤2014中，为了使展示给用户的网页整洁，便于用户查看，在网页中展示所述多个问题时，仅展示问题，不展示问题的答案。
[0099]步骤202、通过CSS获取所述单选按钮的状态；
[0100]具体地，所述单选按钮的状态包括选中和未选中。
[0101]步骤203、所述CSS通过相邻兄弟选择器在网页中根据所述单选按钮的状态显示或隐藏该按钮对应的问题的答案。
[0102]具体地，CSS实时监控并获取单选按钮的状态，当单选按钮为选中状态时，通过CSS显示该按钮对应的问题的答案。由于相邻兄弟选择器具有较高的运算效率，特别适用于桌面问题类答案的显示，显示该按钮对应的问题的答案时，采用CSS的相邻兄弟选择器显示问题的答案。
[0103]本发明实施例在当用户选择某个问题时，仅显示用户选中的问题的答案，当用户选择其他问题时，前面选择的问题的答案自动关闭。可见，同时存在多个问题时，设置单选按钮在网页的显示效果方面具有明显的优势。
[0104]本发明特别适用于桌面问题类，由于桌面问题逻辑较单一，例如，只有问题和问题对应的答案，利用CSS的相邻兄弟选择器，可以有效地省去了脚本代码开发和维护成本，降低系统的资源消耗，提高效率。
[0105]由于本发明通过CSS在每个标题上设置单选按钮，通过CSS获取所述单选按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的单选按钮和CSS的相邻兄弟选择器就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
[0106]实施例三:
[0107]如图8、图9所示，本发明实施例三提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0108]步骤301、在网页中插入问题和该问题的答案，通过CSS在所述问题上设置单选按钮。其中，每个问题与对应的答案在网页上相邻排列。
[0109]所述单选按钮是HTML语言的一个控件;为了方便用户查看问题，提高用户体验，所述单选按钮在网页上为隐藏状态。
[0110]当同时存在多个问题需要在同一网页上显示时，如图9所示，步骤301包括:
[0111]步骤3011、在网页中插入多个问题和问题对应的答案。
[0112]—般来说，步骤3011是采用HTML语言来实现的。
[0113]步骤3012、依次排列所述多个问题和每个问题的答案;其中，每个问题与对应的答案在网页上相邻排列。
[0114]具体地，步骤3012中依次排列所述多个问题和问题对应的答案包括:
[0115]横向排列或纵向排列多个问题。排列问题的答案时，在每个问题附近，比如上方、下方、左边、右边插入问题对应的答案。如图7所示。
[0116]步骤3013、通过CSS在每个所述问题上设置单选按钮；
[0117]具体地，步骤3013为通过CSS(即层叠样式表)在每个所述问题上设置单选按钮。CSS可以设置单选按钮在网页上覆盖的范围，比如覆盖整个问题的文字部分，或者该问题所在的行或列，或者，包含有该问题的其他范围，从而方便用户快速选中问题。
[0118]步骤3014、在网页中展示所述多个问题。
[0119]具体地，步骤3014中，为了使展示给用户的网页整洁，便于用户查看，在网页中展示所述多个问题时，仅展示问题，不展示问题的答案。
[0120]步骤302、通过CSS获取所述单选按钮的状态。
[0121 ]具体地，所述单选按钮的状态包括选中和未选中。
[0122]步骤303、所述CSS通过后代选择器在网页中根据所述单选按钮的状态显示或隐藏该按钮对应的问题的答案。
[0123]具体地，CSS实时监控并获取单选按钮的状态，当单选按钮为选中状态时，通过CSS显示该按钮对应的问题的答案。
[0124]本发明实施例在当用户选择某个问题时，仅显示用户选中的问题的答案，当用户选择其他问题时，前面选择的问题的答案自动关闭。可见，同时存在多个问题时，设置单选按钮在网页的显示效果方面具有明显的优势。
[0125]本发明特别适用于桌面问题类，由于桌面问题逻辑较单一，例如，只有问题和问题对应的答案，利用CSS的后代选择器，可以有效地省去了脚本代码开发和维护成本，降低系统的资源消耗，提高效率。
[0126]由于本发明通过CSS在每个标题上设置单选按钮，通过CSS获取所述单选按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的单选按钮和CSS的后代选择器就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
[0127]实施例四:
[0128]如图10所示，本发明实施例四提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0129]步骤4011、在网页中插入多个问题和问题对应的答案。
[0130]一般来说，步骤4011是采用HTML语言来实现的。
[0131]步骤4012、依次排列所述多个问题和每个问题的答案;其中，每个问题与对应的答案在网页上相邻排列。
[0132]具体地，步骤4012中依次排列所述多个问题和问题对应的答案包括:
[0133]横向排列或纵向排列多个问题。排列问题的答案时，在每个问题附近，比如上方、下方、左边、右边插入问题对应的答案。如图7所示。
[0134]步骤4013、通过CSS在每个所述问题上设置复选按钮；
[0135]具体地，步骤4013为通过CSS(即层叠样式表)在每个所述问题上设置复选按钮，复选按钮也叫做多选按钮，是HTML语言的一种控件，采用复选按钮，可以同时选择多项内容。CSS可以设置复选按钮在网页上覆盖的范围，比如覆盖整个问题的文字部分，或者该问题所在的行或列，或者，包含有该问题的其他范围，从而方便用户快速选中问题。
[0136]步骤4014、在网页中展示所述多个问题。
[0137]具体地，步骤4014中，为了使展示给用户的网页整洁，便于用户查看，在网页中展示所述多个问题时，仅展示问题，不展示问题的答案。
[0138]步骤4015、通过CSS获取所述复选按钮的状态；
[0139]具体地，所述复选按钮的状态包括选中和未选中。
[0140]步骤4016、通过CSS的相邻兄弟选择器在网页中根据所述复选按钮的状态显示该按钮对应的问题的答案。
[0141]具体地，CSS实时监控并获取复选按钮的状态，当复选按钮为选中状态时，通过CSS显示该按钮对应的问题的答案。由于相邻兄弟选择器具有较高的运算效率，特别适用于桌面问题类答案的显示，显示该按钮对应的问题的答案时，采用CSS的相邻兄弟选择器显示问题的答案。
[0142]本发明实施例在当用户选择某个问题时，除了显示用户选中的问题的答案外，当用户选择其他问题时，前面选择的问题的答案也可以同时显示，便于用户同时查看多个问题的答案，并进行比对。
[0143]本发明特别适用于桌面问题类，由于桌面问题逻辑较单一，例如，只有问题和问题对应的答案，利用CSS的相邻兄弟选择器，可以有效地省去了脚本代码开发和维护成本，降低系统的资源消耗，提高效率。
[0144]由于本发明通过CSS在每个标题上设置复选按钮，通过CSS获取所述复选按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的复选按钮和CSS的相邻兄弟选择器就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
[0145]实施例五:
[0146]如图11所示，本发明实施例五提供了一种基于CSS在网页上展示开关效果的方法，包括:
[0147]步骤5011、在网页中插入多个问题和问题对应的答案。
[0148]—般来说，步骤5011是采用HTML语言来实现的。
[0149]步骤5012、依次排列所述多个问题和每个问题的答案;其中，每个问题与对应的答案在网页上相邻排列。
[0150]具体地，步骤5012中依次排列所述多个问题和问题对应的答案包括:
[0151]横向排列或纵向排列多个问题。排列问题的答案时，在每个问题附近，比如上方、下方、左边、右边插入问题对应的答案。如图7所示。
[0152]步骤5013、通过CSS在每个所述问题上设置复选按钮；
[0153]具体地，步骤5013为通过CSS(即层叠样式表)在每个所述问题上设置复选按钮，复选按钮也叫做多选按钮，是HTML语言的一种控件，采用复选按钮，可以同时选择多项内容。CSS可以设置复选按钮在网页上覆盖的范围，比如覆盖整个问题的文字部分，或者该问题所在的行或列，或者，包含有该问题的其他范围，从而方便用户快速选中问题。
[0154]步骤5014、在网页中展示所述多个问题。
[0155]具体地，步骤5014中，为了使展示给用户的网页整洁，便于用户查看，在网页中展示所述多个问题时，仅展示问题，不展示问题的答案。
[0156]步骤5015、通过CSS获取所述复选按钮的状态；
[0157]具体地，所述复选按钮的状态包括选中和未选中。
[0158]步骤5016、所述CSS通过后代选择器在网页中根据所述单选按钮的状态显示或隐藏该按钮对应的问题的答案。
[0159]具体地，CSS实时监控并获取复选按钮的状态，当复选按钮为选中状态时，通过CSS显示该按钮对应的问题的答案。由于后代选择器具有较高的运算效率，特别适用于桌面问题类答案的显示，显示该按钮对应的问题的答案时，采用CSS的后代选择器显示问题的答案。
[0160]本发明实施例在当用户选择某个问题时，除了显示用户选中的问题的答案外，当用户选择其他问题时，前面选择的问题的答案也可以同时显示，便于用户同时查看多个问题的答案，并进行比对。
[0161]本发明特别适用于桌面问题类，由于桌面问题逻辑较单一，例如，只有问题和问题对应的答案，利用CSS的后代选择器，可以有效地省去了脚本代码开发和维护成本，降低系统的资源消耗，提高效率。
[0162]由于本发明通过CSS在每个标题上设置复选按钮，通过CSS获取所述复选按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的复选按钮和CSS的后代选择器就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提高系统效率。
[0163]实施例六:如图12所示，本发明实施例六提供了一种基于CSS在网页上展示开关效果的装置，包括:
[0164]插入模块，用于在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列；
[0165]对于在网页上同时存在多个标题的应用场景，所述插入模块包括:
[0166]第一插入单元，用于在网页中插入多个标题和与每个标题关联的内容；
[0167]排列单元，用于依次排列所述多个标题和每个与标题关联的内容;其中，每个标题和与该标题关联的内容在网页上相邻排列；
[0168]第二插入单元，用于通过CSS在每个所述标题上设置选择按钮；
[0169]展示单元，用于在网页中展示所述多个标题。
[0170]所述选择按钮可以为单选按钮，所述单选按钮在网页上为隐藏状态或不隐藏状态。所述选择按钮可以为复选按钮，所述复选按钮在网页上为隐藏状态。
[0171 ]状态获取模块，用于获取所述选择按钮的状态；
[0172]显示模块，用于CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0173]本实施例中所述标题为供用户选择的问题，所述标题关联的内容为所述问题的答案。
[0174]所述显示模块还用于:
[0175]所述CSS通过相邻兄弟选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
[0176]作为一种替换方案，所述显示模块还用于:
[0177]通过CSS的后代选择器显示处于选中状态的选择按钮对应的标题关联的内容。
[0178]由于本发明通过CSS在每个标题上设置选择按钮，获取所述选择按钮的状态；当用户选中某个或某几个标题时，通过CSS显示该按钮对应的标题关联的内容，相当于在网页上展开开关效果。由于本发明仅仅通过基于CSS的选择按钮就能实现网页上对应于标题的开关效果，不需要js脚本代码操作，从而减少脚本开发的流程，还能节约脚本代码计算所消耗的系统资源，提尚系统效率。
[0179]以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也视为本发明的保护范围。
【主权项】
1.基于CSS在网页上展示开关效果的方法，其特征在于，包括: 在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列； 获取所述选择按钮的状态； CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。2.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮包括: 在网页中插入多个标题和与每个标题关联的内容； 依次排列所述多个标题和每个与标题关联的内容;其中，每个标题和与该标题关联的内容在网页上相邻排列； 通过CSS在每个所述标题上设置选择按钮； 在网页中展示所述多个标题。3.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述选择按钮为单选按钮。4.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述选择按钮为复选按钮； 所述CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容，包括: 所述CSS根据所述选择按钮的状态显示或隐藏一个或多个选择按钮对应的标题关联的内容。5.根据权利要求3或4所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述选择按钮在网页上为隐藏状态。6.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述选择按钮在网页上覆盖的范围包括对应的标题在网页上覆盖的范围。7.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于，所述CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容，包括: 所述CSS通过相邻兄弟选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。8.根据权利要求1所述的基于CSS在网页上展示开关效果的方法，其特征在于， 所述CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容，包括: 所述CSS通过后代选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。9.基于CSS在网页上展示开关效果的装置，其特征在于，包括: 插入模块，用于在网页中插入标题和与标题关联的内容，通过CSS在所述标题上设置选择按钮;其中，所述标题和与标题关联的内容在网页上相邻排列； 状态获取模块，用于获取所述选择按钮的状态； 显示模块，用于CSS根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。10.根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述插入模块包括: 第一插入单元，用于在网页中插入多个标题和与每个标题关联的内容； 排列单元，用于依次排列所述多个标题和每个与标题关联的内容;其中，每个标题和与该标题关联的内容在网页上相邻排列； 第二插入单元，用于通过CSS在每个所述标题上设置选择按钮； 展示单元，用于在网页中展示所述多个标题。11.根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述选择按钮为单选按钮。12.根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述选择按钮为复选按钮;所述显示模块还用于:所述CSS根据所述选择按钮的状态显示或隐藏一个或多个选择按钮对应的标题关联的内容。13.根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述显示模块还用于: 所述CSS通过相邻兄弟选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。14.根据权利要求9所述的基于CSS在网页上展示开关效果的装置，其特征在于，所述显示模块还用于: 所述CSS通过后代选择器根据所述选择按钮的状态显示或隐藏选择按钮对应的标题关联的内容。
【文档编号】G06F17/30GK106020925SQ201610402239
【公开日】2016年10月12日
【申请日】2016年6月8日
【发明人】灏规芳, 尹淼
【申请人】腾讯科技（深圳）有限公司