Jquery中文网 > 脚本编程 > javascript > 正文 javascript简单实用的选项卡实例代码

javascript简单实用的选项卡实例代码

发布时间：2016-12-13 编辑：www.jquerycn.cn

jquery中文网为您提供javascript简单实用的选项卡实例代码等资源，欢迎您收藏本站，我们将为您提供最新的javascript简单实用的选项卡实例代码资源

文章介绍了是一款简单的tab选项卡切换效果，在网上到处可见到，本段选项卡代码非常听简洁但很实用肯兼容性高，有需要的同学也可以参考一下。

提示：您可以先修改部分代码再运行

<textarea name="runcool" rows="28" cols="75" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>javascript简单实用的选项卡导航菜单</title> <meta http-equiv="content-type" content="text/html;charset=gb2312"> <style type="text/css"> #header{background-color:#F8F4EF;height:200px;width:400px;border:1px solid #ECE1D5;font-family:"宋体";font-size:12px;} #menu{margin:0;padding:0;list-style-type:none;} #menu li{display:block;width:100px;line-height:23px;text-align:center;float:left;cursor:pointer;} .sec1{background-color:#FFFFCC;} .sec2{background-color:#00CCFF;} .block{display:block;} .unblock{display:none;} </style> <script language="javascript"> function secBoard(n){ var menu=document.getElementById('menu').getElementsByTagName('li'); var main=document.getElementById('main').getElementsByTagName('li'); for(i=0;i<menu.length;i ){ menu[i].className="sec1"; } menu[n].className="sec2"; for(i=0;i

<ul id="menu"> <li onmouseover="secBoard(0)" class="sec2">最新新闻</li> <li onmouseover="secBoard(1)" class="sec1">最新文章</li> <li onmouseover="secBoard(2)" class="sec1">最新日志</li> <li onmouseover="secBoard(3)" class="sec1">论坛新帖</li> </ul> <ul id="main"> <li class="block">第一个内容：预防蜱虫必知的11个知识问答</li> <li class="unblock">第二个内容：购物商城限时抢购，倒计时JS代码</li> <li class="unblock">第三个内容：落魄千万富翁的一首歌－很man</li> <li class="unblock">第四个内容：七十六个网站用户体验要点</li> </ul>

</body> </html></textarea>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
javascript简单实用的选项卡实例代码
 jquery网页选项卡应用代码
 jquery自动切换tabs选项卡的实现代码
 JavaScript 实例
 超简单javascript实现的选项卡菜单效果
 实用的Jquery选项卡TAB示例代码
 Javascript中常用选项卡3种写法
 IE浏览器在新选项卡中打开窗口的设置教程
 JavaScript 选择option选项的方法
 jQuery 网页选项卡的示例代码

上一篇：javascript抽奖程序代码下一篇：原生javascript选项卡菜单代码

[关闭]

javascript简单实用的选项卡实例代码

最近更新

浏览排行