********************************************************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部分

<div class="tab-container"><div class="tab-navi"><ul><li>N1</li><li>N2</li></ul></div><div class="tab-body"><ul><li><div class="tab-container"><div class="tab-navi"><ul><li>N1-1</li><li>N2-2</li></ul></div><div class="tab-body"><ul><li>内容1-1</li><li>内容2-2</li></ul></div></div></li><li>内容2</li> </ul> </div></div>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()});