********************************************************2018/3/15更新*********************************************************

 

           $('.left_sub p').on('click', function () {

                var name = $(this).attr('name');

                $('.left_sub p').removeClass('active');

                $(this).addClass('active');

                $('.p_config').removeClass('active');

                $('.' + name).addClass('active');

            });

 

 

 

 

下面封装的方法 属于原创 如需转载 请注明出处  http://www.cnblogs.com/supershare/p/6687813.html

PS：方法中主要是采取了ul li结构 ，封装成方法以后可以在很多地方复用，希望对大家有所帮助

HTML部分

    
 
     
 
      
 
       
N1
 
       
N2
 
      
 
     
 
     
 
      
 
       
 
        
 
         
 
          
 
           
N1-1
 
           
N2-2
 
          
 
         
 
         
 
          
 
           
内容1-1
 
           
内容2-2
 
          
 
         
 
        
 
 
       
内容2
 
      
 
     
    
 CSS部分来了 CSS部分CSS部分

.tab-navi>ul{
    border:1px solid black; margin: 0; padding: 0; } .tab-navi li{ display: inline-block; background-color: grey; cursor: pointer; } li.active { color: red; } .tab-body>ul{ border:1px solid black; margin: 0; padding: 0; }

重点的封装方法的部分

(function ($) {
       $.fn.myTab = function () {
      //这里的this 指的是 jquery的一个数组 谁调用就是谁 return this.each(function(){ var $navLis = $(this).find(">.tab-navi>ul>li");//获取导航菜单的li数组 var $conLis = $(this).find(">.tab-body>ul>li"); //初始化 下面这三行可以封装成一个方法 $navLis.eq(0).addClass("active"); $conLis.hide(); $conLis.eq(0).show(); $navLis.on('click',function(){ $navLis.removeClass('active'); $(this).addClass('active'); var ind=$(this).index(); $conLis.hide(); $conLis.eq(ind).show(); }); }); } })(jQuery); PS 重点部分来了（记得在使用的时候在页面中添加下面引用方法哦）

$(function(){
    $(".tab-container").myTab() });