一个页面实现多个选项卡切换
2012-10-19 10:31
543 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" > <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <title>简洁Tab</title> <style type="text/css"> <!-- body,div,ul,li{ padding:0; text-align:center; display:inline; } body{ font:12px "宋体"; text-align:center; } a:link{ color:#00F; text-decoration:none; } a:visited { color: #00F; text-decoration:none; } a:hover { color: #c00; text-decoration:underline; } --> </style> <script> <!-- /*第一种形式 第二种形式 更换显示样式*/ function setTab(name,cursel,n){ for(i=1;i<=n;i++){ var menu=document.getElementById(name+i); var con=document.getElementById("con_"+name+"_"+i); menu.className=i==cursel?"hover":""; con.style.display=i==cursel?"block":"none"; } } //--> </script> </head> <body> <div class="Menubox"> <ul> <li id="one1" onclick="setTab('one',1,5)" >手机充值</li> <li id="one2" onclick="setTab('one',2,5)" >网上银行充值</li> <li id="one3" onclick="setTab('one',3,5)">支付宝充值</li> <li id="one4" onclick="setTab('one',4,5)">手机充值卡充值</li> <li id="one5" onclick="setTab('one',5,5)">金币账户充值</li> </ul> </div> <div class="Contentbox"> <div id="con_one_1" >新闻列表1</div> <div id="con_one_2" style="display:none">新闻列表2</div> <div id="con_one_3" style="display:none">新闻列表3</div> <div id="con_one_4" style="display:none">新闻列表4</div> <div id="con_one_5" style="display:none">新闻sssssssssssssssssssss列表5</div> </div> <br /> <div class="Menubox"> <ul> <li id="ccc1" onclick="setTab('ccc',1,5)" >手机充值</li> <li id="ccc2" onclick="setTab('ccc',2,5)" >网上银行充值</li> <li id="ccc3" onclick="setTab('ccc',3,5)">支付宝充值</li> <li id="ccc4" onclick="setTab('ccc',4,5)">手机充值卡充值</li> <li id="ccc5" onclick="setTab('ccc',5,5)">金币账户充值</li> </ul> </div> <div class="Contentbox"> <div id="con_ccc_1" >新闻列表1</div> <div id="con_ccc_2" style="display:none">新闻列表2</div> <div id="con_ccc_3" style="display:none">新闻列表3</div> <div id="con_ccc_4" style="display:none">新闻列表4</div> <div id="con_ccc_5" style="display:none">新闻sssssssssssssssssssss列表5</div> </div> </body> </html>
相关文章推荐
- Android组件TabHost实现页面中多个选项卡切换效果
- 一个页面实现多个管理页面任意切换
- 自定义TabHost 一个avtiviy 多个标签 ,实现背景图片随选项卡切换滑动效果
- easyui实现tabs选项卡之间的切换(只显示一个)
- Android中想实现多个选项卡的切换,该如何实现
- 任务一:使用选项卡实现页面切换
- js实现同一个页面多个渐变效果的方法
- TabHost+ViewPager实现 点击选项卡和滑动界面都可以切换页面
- 微信小程序开发之实现选项卡(窗口顶部TabBar)页面切换
- 动手去实现一个页面切换TabView
- 编写一个项目,实现页面之间切换时的动画效果。上传代码并描述步骤
- Android 一个Activity 里面放置多个 Fragment 实现点击切换的Tab 页面效果
- iOS实现一个简单的页面切换控件
- 一个页面可以重复调用的TAB选项卡切换js代码 鼠标悬浮
- 选项卡 一个页面支持多个 表现 结构分离
- 使用iframe实现将四个页面合成一个页面,并可以随意切换
- Android5.0 共享元素 实现不同页面的同一个View的切换效果
- Android的一个项目中,实现页面之间切换时的动画效果
- Multiple-View ViewPager-如何实现Viewpager控件的一个页面展示多个page以及回弹效果
- javaScript实现在一个页面中对某一部分的切换