演示地址:http://demo.joyfulboy.cn/js/choice/

JS调用说明:

函数调用方法:
choice(参数1, 参数2, 参数3, ……, 参数n);

参数说明:
参数1 = this; 当前对象;
参数2 = “你需要显示的 DIV ID”; 字符串类型;
参数3 – 参数n = “你需要隐藏的 DIV ID”; 字符串类型;
参数顺序不允许颠倒;

例如:onmouseover = ‘choice(this, “show1”, “show2”);’;
此时当鼠标移动到此上面时ID为show1的DIV显示,ID为show2的DIV隐藏;

例如:onmouseout = ‘choice(this);’;
此时当鼠标移开此上面时className=choice

在线演示地址1:http://demo.joyfulboy.cn/js/tagswitch/1/

在线演示地址2:http://demo.joyfulboy.cn/js/tagswitch/2/

看演示,两种方法,显示效果都一样。

演示1所用的方法是把不需要显示的内容所在的DIV块用CSS样式隐藏了,好处是任何被隐藏的内容也会被搜索引擎识别并抓取,坏处是样式如果不加载的话被隐藏的内容就会显示出来。

演示2所用的方法是利用JS把所显示的内容动态写进DIV块内,DIV块永远是那一个DIV,内容是动态变的,好处是不受CSS样式的影响,坏处就是搜索引擎不会抓取动态改变的内容。

JS调用方法自己参考演示页面源码或查看JS文件注释,这里不想多说了,个人推荐应用第二中方法。