layui tab控件中载入外部html页面

目前,潜入外部网页的方式,主要有3种:

  1. iframe方式

    <div><iframe src="xxx.jsp"></iframe>

  2. ajax方式

    <div id=“externalHtml"></div>

    ajax加载数据后,直接赋予 externalHtml.innerHTML 即可。

  3. script脚本方式

    <div><script src="xxx.js" type="text/javascript"></script></div>


第一种方式的示例
<div class="layui-tab" lay-filter="demo" lay-data="{ height:332}">
    <ul class="layui-tab-title">
        <li class="layui-this">hao123</li>
        <li>百度</li>
        <li>layui的button</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <iframe src="http://www.hao123.com"></iframe>
        </div>
        <div class="layui-tab-item" >
            <iframe src="http://www.taobao.com"></iframe>
        </div>
        <div class="layui-tab-item">
            <button class="layui-btn layui-btn-normal">百搭按钮</button>
        </div>
    </div>
</div>


layui 是一款优秀的前端 UI 框架,其提供了很多实用的组件,其包括 tab 组件。tab 组件可以用于制作选项卡切换效果,用起来非常方便。 使用 layui tab 组件实现切换效果的步骤如下: 1. 引入 layui 的样式文件和相关 JS 文件。 2. 在 HTML 文件添加 tab 容器,如下: <ul class="layui-nav layui-tab" lay-filter="tab"> </ul> 3. 在 JS 文件定义 tab 的数据,如下: layui.use(['element', 'layer', 'form', 'jquery', 'tab'], function () { var element = layui.element, layer = layui.layer, form = layui.form, $ = layui.jquery, tab = layui.tab; tab.tabAdd({ title: '选项卡标题', content: '选项卡内容', id: '选项卡ID' }); }); 4. 可以添加多个选项卡,即在上面的函数多次调用 tabAdd 方法。 5. 设置动态加载选项卡内容的方法,如下: //动态获取选项卡内容 function getTabContent(tabId) { var title = $('#' + tabId).text(); if (title == '选项卡1') { return '选项卡1内容'; } else if (title == '选项卡2') { return '选项卡2内容'; } } 6. 绑定 tab 切换事件,如下: // 利用事件委托方式,新增选项卡切换事件 $(document).on('click', '.layui-tab-title li', function () { var tabId = $(this).attr('lay-id'); var content = getTabContent(tabId); tab.tabChange(tabId); }); 7. 最后在 HTML 文件添加相应的选项卡,即可实现 tab 切换效果。 以上就是使用 layui tab 组件实现切换效果的主要步骤,具体实现可以根据自己的需要进行调整。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值