js选项卡设计的要点有哪些? 财富值5

2020-04-01 16:32发布

5条回答
太阳当空照
2楼 · 2020-04-01 17:49

思路:

选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。

代码的实现:

(2)实现简单的切换效果

要点1:abc.document.getElementsByTagName("li"):取得abc下面的所有标签为li的元素,返回的是一个元素集合,有数组的一些属性。

要点2:循环,先循环给li加上onclick事件,再onlink事件点击的时候,再循环让所有选项卡的act样式去掉,所有的内容隐藏。然后让所点击的选项及对应内容显示。

要点3:tab_t_li[i].index = i; 在循环时,给选项卡加一个额外的属性并赋值,以做选项卡和内容的对应。

(3)写成函数。

上面的写法只能一个页面用一个选项卡,如果再加一个的话,就需要复制一份,再改很多变量名。
要点:tab_t_li[i][evt] 因为传值的时候是字符串,如果直接写的话就是tab_t_li[i]."onclick"这样话是执行不了的,tab_t_li["onclick"]这样执行没问题。
好了,现在一个页面上就可以有多个切换了,只需要调用函数的时候,写上相应的id名和标签名,事件名称就可以了。


九年
3楼 · 2020-05-12 10:10

选项卡的设计关键点,是点击其中一个标题,当前对应的这个显示,其它的都隐藏。

我们在具体设计中,标题和内容部分应该一一对应,且内容部分只有一个显示,其它的都隐藏,标题给当前这个添加一个选中的样式。

当我们点击标题时,获取当前这个标题的下标,让对应下标的内容显示,其它的内容隐藏,对应的标题加选中样式,其它的标题去掉选中样式。

孙哈哈
4楼 · 2020-05-28 20:41

1. 获取元素;

2. for循环按钮元素添加onclick(点击) 或者 onmousemove(移入)事件;

3. 点击当前按钮时会以高亮状态显示,通过for循环历遍把所有的按钮样式设置为空在把所有div的display设置为none。

4. 点击当前按钮添加样式,把当前div显示出来,display设置为block。


选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。

1、首先获取元素。

2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。

3、因为点击当前按钮时会以高亮状态显示,所以要再通过for循环历遍把所有的按钮样式设置为空和把所有DIV的display设置为none。

4、把当前按钮添加样式,把当前DIV显示出来,display设置为block。

注:给多个元素添加多个事件要用for循环历遍。如选项卡是点击切换,当前按钮高度,点击和按钮高亮就是2个事件,所以要用2个for循环历遍。


image.png

相关问题推荐

  • 回答 97
    已采纳

    Js给初学者的印象总是那么的杂而乱,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置...

  • 回答 4

    看图:

  • 回答 18

    基本类型( 6种 ):Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol  ( 唯一 )

  • 回答 19

    JavaScript 使网页增加互动性,使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。...

  • 回答 18

    timeoutId: 定时器IDfunc: 延迟后执行的函数code: 延迟后执行的代码字符串,不推荐使用原理类似eval()delay: 延迟的时间(单位:毫秒),默认值为0param1,param2: 向延迟函数传递而外的参数,IE9以上支持setInterval: 以固定的时间间隔重复调用一个函...

  • 回答 15

    Number类型String类型Boolean类型Undefined类型Null类型

  • 回答 14

    空格在ASCII中的值为32,空字符为0,可本人觉得不就是都是为空的吗,没有什么区别?char mychar1,mychar2;mychar1=' ';mychar2='\0';printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...

  • 回答 16

    1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...

  • 回答 8

    向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...

  • 回答 2

    我觉得getTopWindow() 应该是他自己写的函数 mask  应该是getTopWindow()函数中 return 出的一个什么玩意show()  jQuery的显示

  • 回答 16

    看上图

  • 回答 9

    如图所示

  • 回答 12

    1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...

  • js选项卡的实现原理2021-06-15 21:48
    回答 6

    如图所示,最简单的选项卡思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示,所以...

  • 回答 4

    1、js截取两个字符串之间的内容:123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert(str);//结果bbbcccdddeee2、js截取某个字符串前面的内容:123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......

  • 回答 4

    如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.

没有解决我的问题,去提问