索菲亚教育学校的栏目切换参考

最新推荐文章于 2021-08-13 17:15:47 发布

置顶 mynewhshichu

最新推荐文章于 2021-08-13 17:15:47 发布

阅读量1.7k

点赞数

文章标签：教育 javascript border 咨询

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/mynewhshichu/article/details/6510798

版权

小引：以这个名字为标题也是应客户的要求...把它宣传下......提高点击率...

前天突然赶着把这个网站前台做完，美工把幻灯片切换和栏目鼠标滑过切换交给我来完成，我是参考以前各大网站，之后修改开源代码来实现这个效果...

代码中心一：

Code:

<script language="JavaScript" type="text/javascript">
function ChangeDiv(divId,divName,zDivCount)
{
for(i=0;i<=zDivCount;i++)
{
document.getElementByIdx_x_x_x(divName+i).style.display="none";
}
document.getElementByIdx_x_x_x(divName+divId).style.display="block";
}
</script>

放到<head></head>当中，

代码中心二：

Code:

<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span>
<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容第一区<br></div> <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容第二区<br></div>
<div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容第三区</div>
</div>

放到body当中......

最后的效果是鼠标滑过，内容达到切换

看下效果：

索菲娅教育致力于英语教学、欧美课堂课程开发、国际幼儿园、早期教育、中英文化交流等教育事业的教育咨询机构。由从事教育事业的留美人士、海外教育专家和高校的教授联合创办。

　　国际经济合作发展组织OECD公布的“国际学生教育评估量PISA”显示，欧美80%的孩子是自主学习并希望终生学习，而在中国，这样的孩子的比例只有2%。悬殊的数字令人惊讶和深思。索菲娅教育的创建团队多年的海外教学生涯与实践，深感国内教学理念与方法和欧美国家的差距。于是他们把欧美教学教学理念和方法“打包”回国，与国内教育人士一起潜心研究与开发，建立一套既渗透纯正欧美课堂的教学理念，又使之适合中国孩子心智发展的课程系统，应用到索菲娅教育机构旗下英语培训中心、幼儿园以及早教中心等教学实体当中。让中国的孩子也能享受到快乐自由的课堂教学，自主地学习。只有自主兴趣的学习，才是真正的学习，只有重视兴趣引导的教学，才是真正有意义的教学。

　索菲娅教育崇尚爱与自由，也希望在教育的过程中让孩子懂得爱，身心得到自由的发展。索菲娅教育的宗旨---for love, for children 为了爱，为孩子。来到索菲娅，就来到了一个充满爱与欢笑的学习乐园。

给这个索菲亚教育学校打个广告:sophieeducation.com/

下面是添加模块：

看下上面的效果图你会发现有6个子目录要切换，所有我们只要修改代码中心而就可以了：

现增加2个模块：

鼠标划过的区域代码：

Code:

<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',4)" style="cursor:hand;">内容dsda</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',4)" style="cursor:hand;">内容dasda</span>
<span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',4)" style="cursor:hand;">内容ddadfe</span>
<span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',4)" style="cursor:hand;">内容dsdadadf</span>
<span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',4)" style="cursor:hand;">内容dasdaffSD</span>

鼠标划过显示的模块：

Code:

<div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;">
<div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;">内容dsda<br></div>
<div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dasda<br></div>
<div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容ddadfe</div>
<div id="JKDiv_3" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dsdadadf<br></div>
<div id="JKDiv_4" style="display:none;font-size:14px;margin:10px;color:#FF0000;">内容dasdaffSD</div>
</div>

添加成功.....

这个网站后台在做当中，到时候共享下...哈哈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
索菲亚教育学校的栏目切换参考

小引：以这个名字为标题也是应客户的要求...把它宣传下......提高点击率...前天突然赶着把这个网站前台做完，美工把幻灯片切换和栏目鼠标滑过切换交给我来完成，我是参考以前各大网站，之后修改开源代码来实现这个效果...代码中心一：Code: "JavaScript" type="text/javascript"> function Chang
复制链接

扫一扫

评论 4

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。