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');

});
目录
相关文章
|
前端开发 JavaScript 安全
前端框架Layui实现动态选项卡&iframe使用(附源码)
前端框架Layui实现动态选项卡&iframe使用(附源码)
2065 0
|
设计模式 移动开发 Java
【阿里规约】阿里开发手册解读——代码格式篇
本文所有代码格式规范遵循《阿里规约》,从编码、换行符、空格规则、括号规则、字符数等方面展开,详细阐述方法参数、强制转换、运算符、缩进等元素的编写规范。
【阿里规约】阿里开发手册解读——代码格式篇
|
安全 网络虚拟化 数据安全/隐私保护
Windows 10系统自带VPN客户端配置连接PPTP VPN服务器
Windows 10系统自带VPN客户端配置连接PPTP VPN服务器
6140 1
|
前端开发 搜索推荐 数据可视化
阿里低代码引擎LowCodeEngine正式开源
低代码引擎是一款为低代码平台开发者提供的,具备强大扩展能力的低代码研发框架。由阿里巴巴前端委员会、钉钉宜搭联合出品。使用者只需要基于低代码引擎便可以快速定制符合自己业务需求的低代码平台。
阿里低代码引擎LowCodeEngine正式开源
|
资源调度 JavaScript 定位技术
Vue 路由指南:畅游单页应用的地图(Vue Router 和 <router-view>)
Vue 路由指南:畅游单页应用的地图(Vue Router 和 <router-view>)
Vue 路由指南:畅游单页应用的地图(Vue Router 和 <router-view>)
|
5天前
|
存储 关系型数据库 分布式数据库
PostgreSQL 18 发布,快来 PolarDB 尝鲜!
PostgreSQL 18 发布,PolarDB for PostgreSQL 全面兼容。新版本支持异步I/O、UUIDv7、虚拟生成列、逻辑复制增强及OAuth认证,显著提升性能与安全。PolarDB-PG 18 支持存算分离架构,融合海量弹性存储与极致计算性能,搭配丰富插件生态,为企业提供高效、稳定、灵活的云数据库解决方案,助力企业数字化转型如虎添翼!
|
16天前
|
弹性计算 关系型数据库 微服务
基于 Docker 与 Kubernetes(K3s)的微服务:阿里云生产环境扩容实践
在微服务架构中,如何实现“稳定扩容”与“成本可控”是企业面临的核心挑战。本文结合 Python FastAPI 微服务实战,详解如何基于阿里云基础设施,利用 Docker 封装服务、K3s 实现容器编排,构建生产级微服务架构。内容涵盖容器构建、集群部署、自动扩缩容、可观测性等关键环节,适配阿里云资源特性与服务生态,助力企业打造低成本、高可靠、易扩展的微服务解决方案。
1315 5
|
2天前
|
监控 JavaScript Java
基于大模型技术的反欺诈知识问答系统
随着互联网与金融科技发展,网络欺诈频发,构建高效反欺诈平台成为迫切需求。本文基于Java、Vue.js、Spring Boot与MySQL技术,设计实现集欺诈识别、宣传教育、用户互动于一体的反欺诈系统,提升公众防范意识,助力企业合规与用户权益保护。