这篇文章介绍了 JS 实现切换标签页效果实例代码,有需要的朋友可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在网页区添加以下代码
- <style type="text/CSS">
- <!--
- BODY {
- PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; PADDING-BOTTOM: 0px; MARGIN: 0px auto; COLOR: black; LINE-HEIGHT: 150%; PADDING-TOP: 10px; BACKGROUND-COLOR: white; TEXT-ALIGN: center
- }
- .dis {
- DISPLAY: block
- }
- .undis {
- DISPLAY: none
- }
- #cntR {
- WIDTH: 302px
- }
- #NewsTop {
- CLEAR: both; MARGIN-BOTTOM: 16px
- }
- #NewsTop P {
- FLOAT: left; LINE-HEIGHT: 21px
- }
- #NewsTop P.topTit {
- FONT-WEIGHT: bold; WIDTH: 117px
- }
- #NewsTop P.topC0 {
- BACKGROUND: #dcdcdc; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; CURSOR: pointer
- }
- #NewsTop P.topC1 {
- BACKGROUND: #c2130e; BORDER-LEFT: #f2f2f2 1px solid; WIDTH: 40px; COLOR: #fff
- }
- #NewsTop #NewsTop_tit {
- BORDER-BOTTOM: #c2130e 3px solid; HEIGHT: 21px
- }
- #NewsTop #NewsTop_cnt {
- PADDING-LEFT: 32px; BACKGROUND: url(http://www.phperz.com/code/table/tab/o2007320133249.gif) no-repeat 12px 13px; LINE-HEIGHT: 26px; PADDING-TOP: 7px; HEIGHT: 260px; TEXT-ALIGN: left
- }
- #NewsTop #NewsTop_cnt A {
- COLOR: #666; TEXT-DECORATION: none
- }
- #NewsTop #NewsTop_cnt A:hover {
- COLOR: #c2130e; TEXT-DECORATION: underline
- }
- -->
- </style>
在网页区添加以下代码
- <DIV id=cntR>
- <DIV id=NewsTop>
- <DIV id=NewsTop_tit>
- <P class=topTit>
- 新闻排行
- </P>
- <P class=topC0>
- 国内
- </P>
- <P class=topC0>
- 国际
- </P>
- <P class=topC0>
- 社会
- </P>
- <P class=topC0>
- 网评
- </P>
- </DIV>
- <DIV id=NewsTop_cnt>
- <SPAN title="Don't delete me">
- </SPAN>
- <SPAN>
- <A href="http://www.phperz.com" target=_self>
- phperz
- </A>
- <BR>
- <A href="http://play.phperz.com" target=_self>
- 播放器之家
- </A>
- <BR>
- <A href="http://mingzi.phperz.com" target=_self>
- 个性名字网
- </A>
- <BR>
- <A href="http://office.phperz.com" target=_self>
- Office之家
- </A>
- <BR>
- <A href="http://sc.phperz.com" target=_self>
- 素材之家
- </A>
- <BR>
- <A href="http://yueduqi.phperz.com" target=_self>
- 阅读器之家
- </A>
- <BR>
- <div align="right">
- <A href="http://www.phperz.com" target=_self>
- ...more
- </A>
- </div>
- </SPAN>
- <SPAN>
- <A href="http://www.phperz.com" target=_self>
- phperz
- </A>
- <BR>
- <A href="http://play.phperz.com" target=_self>
- 播放器之家
- </A>
- <BR>
- <A href="http://mingzi.phperz.com" target=_self>
- 个性名字网
- </A>
- <BR>
- <A href="http://office.phperz.com" target=_self>
- Office之家
- </A>
- <BR>
- <A href="http://sc.phperz.com" target=_self>
- 素材之家
- </A>
- <BR>
- <A href="http://yueduqi.phperz.com" target=_self>
- 阅读器之家
- </A>
- <BR>
- <div align="right">
- <A href="http://www.phperz.com" target=_self>
- ...more
- </A>
- </div>
- </SPAN>
- <SPAN>
- <A href="http://www.phperz.com" target=_self>
- phperz
- </A>
- <BR>
- <A href="http://play.phperz.com" target=_self>
- 播放器之家
- </A>
- <BR>
- <A href="http://mingzi.phperz.com" target=_self>
- 个性名字网
- </A>
- <BR>
- <A href="http://office.phperz.com" target=_self>
- Office之家
- </A>
- <BR>
- <A href="http://sc.phperz.com" target=_self>
- 素材之家
- </A>
- <BR>
- <A href="http://yueduqi.phperz.com" target=_self>
- 阅读器之家
- </A>
- <BR>
- <div align="right">
- <A href="http://www.phperz.com" target=_self>
- ...more
- </A>
- </div>
- </SPAN>
- <SPAN>
- <A href="http://www.phperz.com" target=_self>
- phperz
- </A>
- <BR>
- <A href="http://play.phperz.com" target=_self>
- 播放器之家
- </A>
- <BR>
- <A href="http://mingzi.phperz.com" target=_self>
- 个性名字网
- </A>
- <BR>
- <A href="http://office.phperz.com" target=_self>
- Office之家
- </A>
- <BR>
- <A href="http://sc.phperz.com" target=_self>
- 素材之家
- </A>
- <BR>
- <A href="http://yueduqi.phperz.com" target=_self>
- 阅读器之家
- </A>
- <BR>
- <div align="right">
- <A href="http://www.phperz.com" target=_self>
- ...more
- </A>
- </div>
- </SPAN>
- </DIV>
- <SCRIPT>
- var Tags = document.getElementById('NewsTop_tit').getElementsByTagName('p');
- var TagsCnt = document.getElementById('NewsTop_cnt').getElementsByTagName('span');
- var len = Tags.length;
- var flag = 1; //修改默认值
- for (i = 1; i < len; i++) { Tags[i].value = i; Tags[i].onmouseover = function() {
- changeNav(this.value)
- }; TagsCnt[i].className = 'undis';
- } Tags[flag].className = 'topC1'; TagsCnt[flag].className = 'dis';
- function changeNav(v) { Tags[flag].className = 'topC0'; TagsCnt[flag].className = 'undis'; flag = v; Tags[v].className = 'topC1'; TagsCnt[v].className = 'dis';
- }
- </SCRIPT>
- </DIV>
- </DIV>
来源: