jquery自定义方法

说起来自己听惭愧的，学了这么久，才写出一个方法。。。真是老脸都丢光了。以后就多用这种方法，养成好习惯吧。

需求：在两个同样的div模板上实现切换效果；

问题：因为是div都是使用了通过的类，所以以前直接使用类选择的方法已经行不通，因为点击一个tab的时候，两个模板的都会懂；

另外，我特别傻x，弄了一下午，alert（）测试tab的数量总是为0，最后下班了才想到自己在使用方法是没把“#”放进去。真是。。。；

总结:如果要使用封装出自己的方法，就要尽量的时候，html标签名来查找元素，而能使用html标签名来查找元素的方法，一般都是children(),siblings(),next(),find(),prev(),parent(),closet()等方法，另外要使用这些方法一定要确定这是jquery对象，还有hasClass()返回的是布尔值（我真傻x）;

还有些小问题，我自己现在才弄懂的，谷歌开发者工具，提示的unexpect token .(unexpect token ,unexpect token })重点是后面的点号"."，问题出现在这里，我四级也太水了。

还有测试对象的方法可以用

for( var pro in obj ){
    document.write(pro+':'+obj[pro]+'<br>')
}
//obj 为对象，pro为该对象的方法属性

<div class="module-title" id="tab1">
    <div class="module-title-text" style="color:#197faf">公告通知    </div>
    <div class="module-title-text">行业资讯</div>
    <span class="line"></span>
</div>
<div>
    <div class="module-content" style="display:block;">
         <ul>
             <li>
                            <a href="">1我是标题我是标题我是标题我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>

                    </ul>
                </div>

                <div class="module-content" >
                    <ul>
                        <li>
                            <a href="">2我是标题我是标题我是标题我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>
                        <li>
                            <a href="">我是标题我是标题我是标题</a>
                        </li>

                    </ul>
                </div>
            </div>

　　

jquery

<script type="text/javascript">
    function _tab(id){
        var $id = $(id);
        var $tab =$(id).children('div');
        var $nextdiv = $(id).next('div').find('div');
        var $line = $(id).children('span');
        $tab.click(function(){
            var _index = $(this).index();
            $(this).css('color','#197faf').siblings().css('color','#555');
            $nextdiv.eq(_index).show().siblings().hide().css('color','#555');
            if(_index == 0){
                $line.animate({'left':'0'},300);
            }else{
                $line.animate({'left':'50%'},300);
            }
        })
    }
    _tab('#tab1');//睁大狗眼看清楚有个井号
    _tab('#tab2');
</script>