/*
Jquery版的Tab切换效果

1.无需嵌入其他脚本，可以对页面上所有符合该格式的内容作用。
2.无需指定tab和panel之间的关系，自动通过各自的顺序去对应。

//<div class="list-left-content">
//                <div class="tabnav">
//                    <ul>
//                        <li>全部</li>
//                        <li>药品</li>
//                    </ul>
//                </div>
//                <div class="tabcontent">
//                    <table  width="100%" border="0" cellspacing="0" cellpadding="0">
//                        <tr><td></td></tr>
//                    </table>
//                    <table  width="100%" border="0" cellspacing="0" cellpadding="0">
//                        <tr><td></td></tr>
//                    </table>
//                </div>
//</div>    

Copyright 2009 by ligang 
Free for non-commercial use
*/



//处理页面上所有tab
$(document).ready(function() {

    $(".tabnav").each(function() {
        $(this).find('li:first').addClass("active"); //将第一个作为默认active
    });
    $(".tabcontent").each(function() {
        $(this).find('table:not(:first)').hide(); //除第一个内容外其他均隐藏
    });

    //处理Li的点击事件
    $('.tabnav li').click(function() {
        //
        var tabs = $(this).parent().children("li");
        var index = $.inArray(this, tabs);

        //核心，触发跟LI的class同样的table显示出来
        if ($(this).parents('.list-left-content').find('table').eq(index)[0]) {
            //去掉所有的active
            $(this).parent().children('li').removeClass('active');
            //当前触发的LI添加 active
            $(this).addClass('active');

            //将所有table隐藏
            $(this).parents('.list-left-content').find('table').hide();
            $(this).parents('.list-left-content').find('table').eq(index).show();
        }

    })
});



//第一版，tab要和panel对应

//<div class="list-left-content">
//                <div class="tabnav">
//                    <ul>
//                        <li class="tab0">全部</li>
//                        <li class="tab1">药品</li>
//                      
//                    </ul>
//                </div>
//                <div class="tabcontent">
//                    <table class="tab0" width="100%" border="0" cellspacing="0" cellpadding="0">
//                        <tr><td></td></tr>
//                    </table>
//                    <table class="tab1" width="100%" border="0" cellspacing="0" cellpadding="0">
//                        <tr><td></td></tr>
//                    </table>
//                </div>
//</div>  

//$(document).ready(function() {

//    $(".tabnav").each(function() {
//        $(this).find('li:first').addClass("active"); //将第一个作为默认active
//    });
//    $(".tabcontent").each(function() {
//        $(this).find('table:not(:first)').hide(); //除第一个内容外其他均隐藏
//    });

//    //处理Li的点击事件
//    $('.tabnav li').click(function() {
//        //记录自己的class名称，方便后面显示对应的panel
//        var thisclass = $(this).attr("class");

//        //去掉所有的active
//        $(this).parent().children('li').removeClass('active');
//        //当前触发的LI添加 active
//        $(this).addClass('active');

//        //将所有table隐藏
//        $(this).parents('.list-left-content').find('table').hide();

//        //核心，触发跟LI的class同样的table显示出来
//        $(this).parents('.list-left-content').find('table').filter('.' + thisclass).show();
//        
//    })
//});