数组索引赋值
jQuery方法:
var tit = [ '鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪' ] var txt = [ '白羊座充满了正义感者的领导风范,但在方法上总到意想不到的失败。这会使老天所赐予的天赋从此偃旗息鼓,难有用武之地。此偃旗息鼓,难有用武之地此偃旗息鼓,难有用武之地', '222', '333', '444', '555', '666', '777', '888', '999', '10', '11', '12' ]; $('#sxTab a').on('click',function () { $(this).addClass('current').siblings().removeClass('current'); var z = $(this).attr ( 'data-value') ;//自定义属性 data-value="1" $('#sxPic img').attr("src","../statics/images/sx/" + z + ".png");//对应图片 $('#sxWords').html(tit[$(this).index()]);//索引 $('#sxTxt').html(txt[$(this).index()]);//索引 })
JavaScript代码:
var pic = [ '../statics/images/sx/1.png', '../statics/images/sx/2.png', '../statics/images/sx/3.png', '../statics/images/sx/4.png', '../statics/images/sx/5.png', '../statics/images/sx/6.png', '../statics/images/sx/7.png', '../statics/images/sx/8.png', '../statics/images/sx/9.png', '../statics/images/sx/10.png', '../statics/images/sx/11.png', '../statics/images/sx/12.png' ]; var tit = [ '鼠','牛','虎','兔','龙','蛇','马','羊','猴','鸡','狗','猪' ] var txt = [ '111', '222', '333', '444', '555', '666', '777', '888', '999', '10', '11', '12' ] var sxTab = document.getElementById('sxTab'); var menu = sxTab.getElementsByTagName('a'); var picList = document.getElementsByClassName('J_pic')[0]; var imgList = picList.getElementsByTagName('img')[0]; var J_sxWords = document.getElementsByClassName('J_sxWords')[0]; for (var i = 0; i < menu.length; i++) { (function (i) { menu[i].onclick = function () { imgList.setAttribute('src',pic[i]); J_sxWords.innerHTML = tit[i]; } }(i)) }