该功能最终实现的结果如下图所示:
程序实现思路:
1、使用for,实现鼠标悬浮中英文切换
2、底部文字切换,使用tab选项卡思路,动态数组获取文字
3、底部文字的切换使用innerHTML
注意以下几点:
1、页面布局,注意active状态是在li上添加,
<li class="active">
<h2>1</h2>
<p>JAN</p>
</li>
<li>
<h2>2</h2>
<p>FER</p>
</li>
2、字符串的拼接
例如:
"abg"+12+5+"dec"
此实例结果是abg125dec,若果想实现中间为17,则需要使用小括号,优先运算,
3、使用数组存储json数据,简化页面结构,将数组中内容取出放入需要的地方,如下:
var arry = [
'快过年了,大家可以商量着去哪里玩吧~',
'wewewqfeeeryue二月',
'三月份的时候了',
'四月份的时候了,马上五月',
'wuyuefen l ',
'六月份了',
'qiyuefenle',
'bayuefen l ',
'jiuyuefen',
'shiyuefen',
'shiyiyuefen',
'shieryuefen'
]
取出来拼接如下:
text.innerHTML = "<h2>"+(this.index+1)+"月活动</h2> <p> "+arry[this.index]+"</p>"
该处需注意的是,若果是单引号,则拼接也全部使用单引号,若双引号,则相同。