按照面向对象的思想写了一个小例子

爱被打了一巴掌 2023-01-12 10:09 90阅读 0赞

<html>  
    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">  
 <style>  
     .box\{width:500px;border:1px solid \#000\}  
     \*\{padding:0;margin:0\}  
     .tab\{border:1px solid \#000;height:27px;\}  
     .tab ul\{float:left;\}  
     .tab ul li\{list-style: none;float:left;width:80px;border:1px solid \#000;font-size:20px;\}  
     .tab .delete\{font-size:12px;color:red;float:right;padding-right:2px;\}  
     .tab .active\{  
         border-bottom:1px solid \#fff;  
         color:\#fff;  
         background-color: aqua;  
     \}  
     .tabadd\{float:right;font-size:20px;border:1px solid \#333;\}  
     .tabsecon \{clear: both;margin:30px\}  
     .tabsecon section\{display:none;\}  
    .tabsecon .active\{display:block;\}  
 </style>

</head>  
    <body>  
 <div class="box">  
     <div class="tab">  
         <ul>  
             <li class="active"><span>新闻啊</span><span class="delete">X</span></li>  
             <li><span>第二个</span><span class="delete">X</span></li>  
              <li><span>第三个</span><span class="delete">X</span></li>  
         </ul>  
         <span class="tabadd">+</span>  
     </div>  
      
     <div class="tabsecon">  
        <section class="active">111</section>  
        <section>222</section>  
        <section>333</section>  
     </div>  
      
      
 </div>  
 <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>  
 <script>

1.  tab是个类
2.  new tab()新建一个对象
3.  constructor是构造函数

class tab\{   
         constructor(arg) \{//构造函数  
             this.init();  
         \}  
         init(e)\{//函数使用时是this.函数名不用加function  
             $(".tab ul li span:first-child").click(this.toggleTab);//this.toggleTab后面没有写括号，带括号的话就会自执行啦，不加括号就是点击的时候执行  
             $(".tabadd").click(this.addTab)  
             $(".tab ul li span:last-child").click(this.deleteTab)  
             $(".tab ul li span:first-child").dblclick(this.editTab);  
             // $(".tab ul li span:first-child").blur(this.editTab);  
         \}  
         toggleTab()\{  
             this.index=$(this).parent("li").index()  
             $(this).parent("li").addClass("active").siblings().removeClass("active");  
             $(".tabsecon section").eq(this.index).addClass("active").siblings().removeClass("active")  
         \}  
         addTab()\{  
             var html='<li><span>第三个</span><span class="delete">X</span></li>';  
             $(".tab ul").append(html);  
             // console.log(this);  
         \}  
         deleteTab()\{  
             $(this).parent("li").remove();  
             if($(".tab").find(".active").length==0)\{  
                 //删除的是高亮显示的那个，就换让他的前一个高亮  
                 this.index=$(".tab").find(".active").index();  
                  $(".tab ul li").eq(this.index).addClass("active").siblings().removeClass("active");  
                  $(".tabsecon section").eq(this.index).addClass("active").siblings().removeClass("active")  
             \}else\{//删除不是高亮的就不管  
                return  
             \}  
              
         \}  
         editTab()\{  
            console.log(this)  
            window.getSelection?window.getSelection().removeAllRanges():document.selection.empty()  
             var inputhtml='<input type="text"/ value='+$(this).text()+' >'  
             $(this).html(inputhtml);  
             var input=this.children\[0\];  
             input.select();  
             input.οnblur=function()\{  
                 $(this).parent("li").html($(this).html())  
             \}  
              
         \}  
     \}  
     **new tab(".tab")**  
 </script>  
</body>  
</html>