很多网页都有 tab 切换选项的功能,这里陌小雨给大家分享自己收藏的一份源码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js - 选项卡</title> <style type="text/css"> *{ margin:0px; padding:0px; } #tab{ margin:10px; } #tab ul{ list-style:none; height:36px; border-bottom:2px solid black ; display:block; } #tab ul li{ float:left; display:inline-block; padding:0px 15px; height:34px; line-height:34px; margin-right:5px; border:1px solid #ccc; border-bottom:none; cursor:pointer; } #tab div{ padding:5px; border:1px solid #ccc; border-top:none; } #tab ul li.on{ border-top:2px solid black; border-bottom: 2px solid white; } .hide{ display:none; } </style> <script type="text/javascript"> window.onload=function(){ var mytab =document.getElementById("tab"); var myul=mytab.getElementsByTagName("ul")[0]; var myli=myul.getElementsByTagName("li"); var mydiv=mytab.getElementsByTagName("div"); // alert(mydiv.length) for(i=0,len=myli.length;i<len;i++){ myli[i].index=i; myli[i].onclick=function(){ for(var n=0;n<len;n++){ myli[n].className=""; mydiv[n].className="hide"; } this.className="on"; mydiv[this.index].className=""; } } } </script> </head> <body> <!-- HTML 页面布局 --> <div id="tab"> <ul> <li>WordPress 插件</li> <li>WordPress 主题</li> <li>WordPress 技巧</li> <li>WordPress 开发</li> </ul> <div> 陌小雨博客 www.dedewp.com 应有尽有 </div> <div class="hide"> 纯 JS 实现选项卡效果陌小雨博客 www.dedewp.com 提供 WordPress 一站式建站服务 </div> <div class="hide"> 无限增加 tab </div> <div class="hide"> <p><a href="https://www.dedewp.com/wp-content/uploads/112.jpg" alt="如果他真的喜欢你" title="如果他真的喜欢你" rel="facebox"><img style="width:300px;height:150px;" data-tag="bdshare" class="aligncenter" src="https://www.dedewp.com/wp-content/uploads/112.jpg" height="400" width="600"></a></p><p>这里可以添加图片,可定制性强</p> </div> </div> </body> </html>
最近忙着工作的事情,所以就不贴演示效果图了。需要说明的都在源码里面说明了,有需要的自己本地试试吧。你需要做的只是点个赞!
你可能对这些文章感兴趣:
- 分享一个心型照片墙源码
- WordPress问答插件DW Question Answer美化版分享
- WordPress在后台主题设置侧栏显示所有分类目录和对应id
- WordPress插件推荐:theme-my-login
- 分享一个带动态数字倒计时的页面跳转源码
- xiu主题的手机端和非手机端广告位后台设置是如何实现的?
- WordPress插件推荐:WP Dialog(附xiu主题专版)
- Chrome浏览器模拟微信、QQ内置浏览器调试网站
- 优酷视频收藏插件如何删除添加的视频
- WordPress主题后台制作教程
- 折腾什么也不要折腾主题了
- WordPress删除所有无效(未附加)图片
- WordPress制作案例演示模板
- WordPress问答中心插件DW Question & Answer自定义链接和调用问题列表
如有疑问,请前往问答中心反馈!
反馈