tab切换代码简单写法

为什么80%的码农都做不了架构师？>>>   

<ul class="sidebar-nav">

    <li class="sidebar-nav-link">

        <a href="javascript:;" class="js-list active" go="./home/home.html" data-m="home">

            <i class="am-icon-home sidebar-nav-link-logo"></i> 首页

        </a>

    </li>

    <li class="sidebar-nav-link">

        <a href="javascript:;" class="js-list" go="./list/user.html" data-m="user">

            <i class="am-icon-user sidebar-nav-link-logo"></i> 用户

        </a>

    </li>

    <li class="sidebar-nav-link">

        <a href="javascript:;" class="js-list" go="./list/invite.html" data-m="invite">

            <i class="am-icon-user-plus sidebar-nav-link-logo"></i> 邀请

        </a>

    </li>

    <li class="sidebar-nav-link">

        <a href="javascript:;" class="js-list" go="./list/tryout.html" data-m="tryout">

            <i class="am-icon-ticket sidebar-nav-link-logo"></i> 试用

        </a>

    </li>

    <li class="sidebar-nav-link">

        <a href="javascript:;" class="js-list" go="./list/health_report.html" data-m="report">

            <i class="am-icon-wpforms sidebar-nav-link-logo"></i> 报告

        </a>

    </li>

</ul>

 

 

$('.js-list').on('click',function(){

    var active_list = ['home','user','invite','tryout','report'];

    var len = active_list.length;

    var parameter = $(this).attr('data-m');

    for(var i = 0;i < len;i++){

        if(active_list[i] == parameter){

            $('a[data-m="' + active_list[i] + '"]').addClass('active');

        }else{

            $('a[data-m="' + active_list[i] + '"]').removeClass('active');

        }

    }

    //iframe局部刷新页面

    var me = $(this).attr('go');

    $('#iframe_list').attr('src',me);

    //操作iframe中的元素

    $('#iframe_list').contents().find('body').attr('class', 'theme-color');

});

转载于:https://my.oschina.net/af666/blog/1595757