简单的选项卡切换插件

最新推荐文章于 2023-03-15 16:46:56 发布

xiaoshunshi

最新推荐文章于 2023-03-15 16:46:56 发布

阅读量558

点赞数

CC 4.0 BY-SA版权

分类专栏： js插件文章标签：简单的选项卡切换插件

本文链接：https://blog.youkuaiyun.com/xiaoshunshi/article/details/78913920

js插件专栏收录该内容

16 篇文章

订阅专栏

本文介绍了一个简单的选项卡组件实现过程，使用HTML、CSS和JavaScript构建。通过jQuery简化DOM操作，实现了选项卡切换效果，适用于网页导航等场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
       <style>
           * {
               margin: 0;
               padding: 0;
               box-sizing: border-box;
           }

           .bar {
               width: 500px;
               margin: 0 auto;
               border: 1px solid gray;
           }

           #tabbar {
               list-style: none;
               width: 100%;
               height: 44px;
           }

           #tabbar li {
               height: 44px;
               line-height: 44px;
               text-align: center;
               width: 25%;
               border-right: 1px solid gray;
               float: left;
               cursor: pointer;
           }

           #tabbar li:last-child {
               border: none;
           }

           .active {
               background: gray;
               color: white;
           }

           #tab {
               list-style: none;
               width: 100%;
               height: 300px;
               border-top: 1px solid gray;
               position: relative;
           }

           #tab li {
               position: absolute;
               left: 0;
               top: 0;
               display: none;

           }

           .tabactive {
               display: block !important;
           }

           #select {
               margin-top: 10px;
           }
       </style>
   </head>

   <body>
       <div id="bar">

       </div>
       <div id="select">

       </div>

   </body>
   <script type="text/javascript">
       (function(w, doc, undefined) {
           w.selectbar = function(opt) {
               this.div = doc.querySelector(opt.id);
               this.div.setAttribute("class", "bar")
               this.init()
           };
           selectbar.prototype = {
               constructor: selectbar,
               init: function() {
                   var $this = this;
                   $this.addtabbar();
               },
               barEvent: function() {
                   console.log("执行绑定")
                   var $this = this;
                   var li = $this.div.querySelector("#tabbar").getElementsByTagName("li");
                   var litab = $this.div.querySelector("#tab").getElementsByTagName("li")
                   for(var i = 0; i < li.length; i++) {
                       li[i].index = i;
                       li[i].onclick = function() {
                           var index = this.index;
                           for(var j = 0; j < li.length; j++) {
                               li[j].removeAttribute("class", "active");
                               litab[j].removeAttribute("class", "active")
                           }
                           $this.div.querySelector("#tabbar").getElementsByTagName("li")[index].setAttribute("class", "active");
                           $this.div.querySelector("#tab").getElementsByTagName("li")[index].setAttribute("class", "tabactive");
                       }

                   }
               },
               addtabbar: function() {
                   console.log("添加选项卡头部内容");
                   var $this = this;
                   var ul = doc.createElement("ul");
                   ul.setAttribute("id", "tabbar");
                   var str = "";
                   for(var i = 0; i < 4; i++) {
                       str += "<li>第" + (i + 1) + "项</li>"
                   };
                   ul.innerHTML = str;
                   $this.div.appendChild(ul);
                   $this.div.querySelector("#tabbar").getElementsByTagName("li")[0].setAttribute("class", "active");
                   $this.addtable();
               },
               addtable: function() {
                   console.log("添加选项卡内容");
                   var $this = this;
                   var ul = doc.createElement("ul");
                   ul.setAttribute("id", "tab");
                   var str = "";
                   for(var i = 0; i < 4; i++) {
                       str += "<li>第" + (i + 1) + "页</li>"
                   };
                   ul.innerHTML = str;
                   $this.div.appendChild(ul);
                   $this.div.querySelector("#tab").getElementsByTagName("li")[0].setAttribute("class", "tabactive");
                   $this.barEvent()
               }
           }
       }(window, document))
   </script>
   <script type="text/javascript">
       var select = new selectbar({
           id: "#bar",
           text: "1111"
       })
       var select2 = new selectbar({
           id: "#select",
           text: "1111"
       })
   </script>

</html>