tab切换代码iframe局部刷新页面-阿里云开发者社区

开发者社区> 开发与运维> 正文

tab切换代码iframe局部刷新页面

简介:

2017年12月27日

tab切换代码iframe局部刷新页面

<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>

 

 
//动态绑定
$('body').on('click','.js-list',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');

});

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章