2021-09-29 js单独封装选项卡插件

单独封装选项卡插件

;(function($)
 { // 封装插件 
 $.fn.extend({
  // 封装一个选项卡插件
   "tab": function() {
    this.click(function(e) { 
    // 高亮选项卡标题
     var e = window.event || e var tgt = e.target || e.srcElement $(this).find("li").removeClass("active")
      // 问题：如何获取到被点击的li？
       $(tgt).addClass("active") 
       // 展示对应的内容
        $(".item").removeClass("active")
         var index = $(tgt).index($(this).find("li")) $(".item").eq(index).addClass("active")
        		  }) 
        	  }
          })
        } 
  (jQuery)) 

/*********************************************** 
<div id="tab"> 
	<ul>
		<li class="active">选项卡标题</li>
		 <li>选项卡标题</li>
  </ul> 
	 <div>
		  <div class="item active">选项卡内容</div>
		  <div class="item">选项卡内容</div>
	</div> 
</div>
**********************************************/