^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助,如果有代码出错,请联系站长解决
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 8年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 腾讯云3年2核2G新品轻量限时特惠只需408元

分享一个tab切换选项源码,可自由定制

很多网页都有 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://dedewp.com/wp-content/uploads/112.jpg" alt="如果他真的喜欢你" title="如果他真的喜欢你" rel="facebox"><img style="width:300px;height:150px;" data-tag="bdshare" class="aligncenter" src="https://dedewp.com/wp-content/uploads/112.jpg" height="400" width="600"></a></p><p>这里可以添加图片,可定制性强</p>
  </div>
</div>
</body>
</html>

最近忙着工作的事情,所以就不贴演示效果图了。需要说明的都在源码里面说明了,有需要的自己本地试试吧。你需要做的只是点个赞!

2 核 2G 限时特惠 396 元/3 年    宝塔建站 10850 大礼包

赠人玫瑰,手有余香。