Tab选项卡切换效果_技术笔记

iFlowers 2019-03-27

将id的获取封装成一个方法。

截图
0赞 · 0采集
慕瓜5189485 2017-11-10

// 封装id函数 function $(id) { return typeof id === 'string' ? document.getElementById(id) : id; } //加载 window.onload = function() { var titles = $("notice-title").getElementsByTagName("li"); var divs = $("notice-content").getElementsByTagName("div"); if(titles.length != divs.length) return; var id = 0; for(var i = 0; i < titles.length; i++) { titles[i].id = i; titles[i].onmouseover = function() { for(var j = 0; j < titles.length; j++) { titles[j].className = ""; divs[j].style.display = "none"; } this.className = "select"; divs[this.id].style.display = "block"; } } }

0赞 · 2采集
qq_只若初见_9 2017-08-12

得尝试遍历操作，以前总是一个个反复操作

截图
0赞 · 0采集
慕粉1027077197 2017-05-06

// 封装id函数 function $(id){ return typeof id==='string'?document.getElementById("id"):id; } //加载 window.onload=function(){ //获取鼠标点击切换标签的元素和内容 var titles=$("notice-tit").getElementsByTagName("li"); divs=$("notice-con").getElementsByTagName("div"); //测试索引 alert(titles.length); //做判断，判断titles与divs的索引是否相等，相等的话执行，不等的话就返回 if(titles.length!=divs.length) return; //遍历titles下所有的li for( var i=0;i<=titles.length;i++ ){ titles[i].id=i; //加事件 titles[i].onmousover=function(){ //清楚所有li上的class for( var j=0 ; j<titles.length;j++){ titles[j].className=""; divs[j].style.display="none"; } //设置当前对象高亮显示 this.className="select"; div[this.id].style.display="block"; } }

0赞 · 2采集
行星饭 2017-04-24

封装js function $（id）{ return typeof id==='string'?document.getElementById(id):id;//三目运算符 } window.onload=function(){ //获取鼠标滑过或点击的标签和要切换内容的元素 var titles = $('notice-tit').getElementByIdTag }

0赞 · 0采集
卿酒酒yy 2017-03-08

id单独封装函数通过id获取元素方便

截图
0赞 · 0采集
慕粉1474836 2017-01-26

选项卡

截图
0赞 · 0采集
门掩重关萧寺中 2017-01-24

titles[i].id=i; 添加索引

0赞 · 0采集
朝夕ing 2017-01-06

js设置

截图
0赞 · 0采集
朝夕ing 2017-01-06

用$封装id

截图
0赞 · 0采集
qweqwe13123123 2016-10-19

可以在鼠标事件里面添加for循环去掉class。原来还可以titles[i].xx =i 直接添加下标。特别注意！选项卡跟内容li的length 要一样长，不然无法隐藏内容的li标签。

截图
0赞 · 0采集
慕慕8663590 2016-09-15

先别急着添加事件，为了能让我们找到对应的div，应该先为每一个标题都添加一个索引的属性。titles[i].id = i;.然后再给每一个标题添加事件

截图
0赞 · 0采集
yoyo2935 2016-08-30

鼠标滑过哪个对象，这个this就代表这个对象，这个对象的id就代表这个对象的索引

0赞 · 0采集
yoyo2935 2016-08-30

鼠标滑过哪个对象，这个this就代表这个对象

0赞 · 0采集
ethanweb 2016-07-13

那个string？是什么意思？

1赞 · 0采集
慕移动7917877 2016-07-04

tab选项卡js代码

截图
0赞 · 0采集
xueyicui 2016-06-12

123

截图
0赞 · 0采集
Songyuthu 2016-03-05

注意链接CSS样式和JS脚本的引用方法。

截图
0赞 · 1采集
于梦中 2016-02-20

tab程序

截图
0赞 · 0采集
illuminiti 2016-01-24

老师的return typeof id==='string'?document.getElementById(id)?id;会出现unexcepted token错误换成return "string" == typeof id ? document.getElementById(id) : id;就可以了为啥？

1赞 · 11采集
慕莱坞7535254 2016-01-06

js中首先自定义了一个函数function $(id){} 所以，js代码中用到的$("notice-tit")不是jQuery语句，而是调用了自定义的函数function $(id){}

0赞 · 0采集
小郎Lie 2015-12-20

导入js

截图
0赞 · 0采集
小猪版纳 2015-12-14

此处有坑，自定义属性兼容写法设置是titles[i].setAttribute('tid',i); 获取是getAttribute('tid')，直接操作属性很可能浏览器不兼容，属性加不上的同学可以试试这种写法

2赞 · 4采集
kwangroy 2015-11-20

$(id); 简化获取名函数

截图
0赞 · 0采集
guangying 2015-11-05

function $(id){ return typeof id==='string'?document.getElementById(id):id; } window.onload=function(){ //获取鼠标滑过或点击的标签和要切换内容的元素 var titles=$('notice-tit').getElementsByTagName('li'), divs=$('notice-con').getElementsByTagName('div'); if(titles.length!=divs.length) return; //遍历titles下所有的li for(var i=0;i<titles.length;i++){ titles[i].id = i; titles[i].onmouseover = function(){ //清除所有li上的class for(var j=0;j<titles.length;j++){ titles[j].className = ''; divs[j].style.display = 'none'; } //设置当前为高亮显示 this.className = 'select'; divs[this.id].style.display = 'block'; } } }

1赞 · 6采集
weibo_JANE幸福小妖_0 2015-10-21

判断title的个数和cont的个数是否相等，不是则不运行return

截图
0赞 · 1采集
weibo_JANE幸福小妖_0 2015-10-21

遍历获取对应索引值

截图
0赞 · 0采集
慕妹2970887 2015-10-19

改变内容的显示： for(var k=0 ;k<divs.length;k++){ divs[k].style.display = 'none'; } divs[this.id].style.display = 'block'; }

0赞 · 2采集
慕妹2970887 2015-10-19

鼠标移动改变div的class,有语句：titles[i].onmouseover = function(){ for(var j=0;j<titles.length;j++){titles[j].className = '';} this.className = "select";

0赞 · 2采集
UFO2015 2015-10-03

A===B?C:D 条件选择表达式

截图
0赞 · 0采集

数据加载中...